微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
作者:清风思月
这篇文章主要介绍了微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能,结合实例形式分析了微信小程序自定义顶部TabBar选项卡页面切换功能的相关布局、样式及功能实现技巧,需要的朋友可以参考下
本文实例讲述了微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能。分享给大家供大家参考,具体如下:
顶部滚动选项卡
话不多说,直接上代码
pages/home/home.wxml
<scroll-view scroll-x="true" style='width: 100%; white-space:nowrap; '> <!-- tab --> <view class="tab"> <view class="tab-nav" style='font-size:12px'> <view wx:for="{{tabnav.tabitem}}" bindtap="setTab" data-tabindex="{{index}}" style="min-width:20%;max-width:20%;text-align:center;height: 80rpx;background: #fff;border-bottom:{{index>4?'1rpx solid #ddd;':''}}">{{item.text}}</view> <view> <view class="tab-line" style="width:{{100/tabnav.tabnum}}%;transform:translateX({{100*showtab}}%);"></view> </view> </view> </view> </scroll-view> <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:150rpx" bindchange="bindChange"> <swiper-item> <view>分类1</view> </swiper-item> <swiper-item> <view>分类2</view> </swiper-item> <swiper-item> <view>分类3</view> </swiper-item> <swiper-item> <view>分类4</view> </swiper-item> <swiper-item> <view>分类5</view> </swiper-item> <swiper-item> <view>分类6</view> </swiper-item> </swiper>
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}); } })
该代码实现基于两个大神的代码,(链接: https://www.jb51.net/article/161227.htm 和https://www.jb51.net/article/155522.htm),在两位大神的基础上衍生出的可滚动的顶部选项卡,在此致谢。代码缺陷:当向右滑动到第6个页面的时候选项卡没有自动滑动。
希望本文所述对大家微信小程序开发有所帮助。