当前位置:首页 >> 网络编程

微信小程序自定义菜单切换栏tabbar组件代码实例

这篇文章主要介绍了微信小程序自定义菜单切换栏tabbar组件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

效果图:

微信小程序自定义菜单切换栏tabbar组件代码实例

wxml代码:

<view class="top_tabbar" > 
 <block wx:for="{{itemName}}" wx:key="{{index}}">
   <view class="item_name {{tabIndex == index " 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
  })
 }

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