微信小程序自定義菜單切換欄tabbar組件代碼實(shí)例

來源：本站原創(chuàng)|時(shí)間：2020-01-10|欄目：JavaScript|點(diǎn)擊：次

這篇文章主要介紹了微信小程序自定義菜單切換欄tabbar組件代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

效果圖：

wxml代碼：

<view class="top_tabbar" > 
 <block wx:for="{{itemName}}" wx:key="{{index}}">
   <view class="item_name {{tabIndex == index ? 'active' : ''}}" bindtap="handleItem" data-index="{{index}}">
    <text>{{item}}</text>
   </view>
 </block>
</view>

wxss代碼：

.top_tabbar{
 width: 100%;
 background-color: #ffffff;
 display: flex;
 position: fixed;
}
.item_name{
 text-align: center;
 margin:20rpx 60rpx;
 color: grey;
}
.active{
 color: lightgreen;
}
.active text{
  padding-bottom: 10rpx;
  border-bottom: 4rpx solid lightgreen;
}

js代碼：

data:{
  itemName: ["軍事", "明星", "動(dòng)漫","風(fēng)景"],
  tabIndex: 0
 },
//獲取點(diǎn)擊事件
handleItem(e){
  // console.log(e)
  const index = e.currentTarget.dataset.index
  this.setData({
   tabIndex: index
  })
 }

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持我們。

上一篇：Vue+Element實(shí)現(xiàn)網(wǎng)頁版?zhèn)€人簡歷系統(tǒng)(推薦)

欄目：JavaScript

下一篇：小程序外賣訂單界面的示例代碼

本文標(biāo)題：微信小程序自定義菜單切換欄tabbar組件代碼實(shí)例

本文地址：http://www.jygsgssxh.com/a1/JavaScript/9355.html

更多JavaScript