微信小程序——自定義菜單切換欄tabbar組件

效果圖：

 

 

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: ["軍事", "明星", "動漫","風景"],
    tabIndex: 0
  },
//獲取點擊事件
handleItem(e){
    // console.log(e)
    const index = e.currentTarget.dataset.index
    this.setData({
      tabIndex: index
    })
  }