微信小程序自定义菜单切换栏tabbar组件代码实例
编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
这篇文章主要介绍了微信小程序自定义菜单切换栏tabbar组件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
这篇文章主要介绍了微信小程序自定义菜单切换栏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
})
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。