十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要介绍微信小程序如何自定义可滑动顶部TabBar选项卡实现页面切换功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
专注于为中小企业提供成都网站制作、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业沁水免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上1000家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
具体如下:
顶部滚动选项卡
话不多说,直接上代码
pages/home/home.wxml
{{item.text}} 分类1 分类2 分类3 分类4 分类5 分类6
pages/home/home.wxss
.tab { display: flex; flex-direction: column; } .tab-nav { border-bottom: 1rpx solid #ddd; width: 100%; height: 80rpx; display: flex; line-height: 79rpx; position: relative; } .tab-line { position: absolute; left: 0; bottom: -1rpx; height: 4rpx; background: #f7982a; transition: all 0.3s; } .tab-content { flex: 1; overflow-y: auto; overflow-x: hidden; } /*选项卡页面联动切换*/ .swiper-tab { width: 100%; border-bottom: 2rpx solid #777; text-align: center; line-height: 80rpx; } .swiper-tab-list { font-size: 30rpx; display: inline-block; width: 33.33%; color: #777; } .on { color: #da7c0c; border-bottom: 1rpx solid #da7c0c; } .swiper-box { display: block; height: 100%; width: 100%; overflow: hidden; } .swiper-box view { text-align: center; }
pages/home/home.js
Page({ data: { showtab: 0, //顶部选项卡索引 tabnav: { tabnum: 5, tabitem: [ { "id": 0, "text": "分类1" }, { "id": 1, "text": "分类2" }, { "id": 2, "text": "分类3" }, { "id": 3, "text": "分类4" }, { "id": 4, "text": "分类5" }, { "id": 5, "text": "分类6" } ] }, productList: [], // tab切换 currentTab: 0, }, onLoad: function () { }, setTab: function (e) { var that = this that.setData({ showtab: e.currentTarget.dataset.tabindex }) if (this.data.currentTab === e.currentTarget.dataset.tabindex) { return false; } else { that.setData({ currentTab: e.currentTarget.dataset.tabindex }) } }, /** * 滑动切换tab */ bindChange: function (e) { var that = this; that.setData({ currentTab: e.detail.current, showtab: e.detail.current}); } })
以上是“微信小程序如何自定义可滑动顶部TabBar选项卡实现页面切换功能”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!