顶部滚动选项卡
话不多说，直接上代码
pages/home/home.wxml
<scroll-view scroll-x="true"> <!-- tab --> <view> <view> <view wx:for="{{tabnav.tabitem}}" bindtap="setTab" data-tabindex="{{index}}">{{item.text}}</view> <view> <view></view> </view> </view> </view> </scroll-view> <swiper current="{{currentTab}}" duration="300" 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个页面的时候选项卡没有自动滑动。