微信小程序——自定义菜单切换栏tabbar组件

2023-10-30 10:16:10

效果图：

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
    })
  }

微信小程序——自定义菜单切换栏tabbar组件