重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要讲解了“微信小程序怎么实现自定义菜单切换栏tabbar组”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序怎么实现自定义菜单切换栏tabbar组”吧!
肥西ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18982081108(备注:SSL证书合作)期待与您的合作!效果图:
wxml代码:
{{item}}
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组”的内容了,经过本文的学习后,相信大家对微信小程序怎么实现自定义菜单切换栏tabbar组这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联网站建设公司,,小编将为大家推送更多相关知识点的文章,欢迎关注!