这篇文章主要介绍了微信小程序自定义菜单切换栏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 }) }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。