本文主要介绍微信小程序自定义 菜单开关栏tabbar组件代码示例，通过示例代码的介绍非常详细，对于每个人的学习或工作都有一定的参考学习价值，需要的朋友可以参考

设计草图：

Wxml代码：

<view > 
 <block wx:for="{{itemName}}" wx:key="{{index}}">
   <view 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: [military, star, animation, scenery],
  tabIndex: 0
 },
//Get click events
handleItem(e){
  // console.log(e)
  const index = e.currentTarget.dataset.index
  this.setData({
   tabIndex: index
  })
 }
以上是南京小程序开发本文的全部内容，希望对您有所帮助，也希望对开发人员有更多的支持。