微信小程序自定义可滑动顶部TabBar选项卡实现页面切换

顶部滚动选项卡

 话不多说，直接上代码

{{item.text}}

分类1

分类2

分类3

分类4

分类5

分类6

 

.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;

}

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://blog.csdn.net/u013521220/article/details/78923136和https://blog.csdn.net/qq442270636/article/details/79084685)，在两位大神的基础上衍生出的可滚动的顶部选项卡，在此致谢。代码缺陷：当向右滑动到第6个页面的时候选项卡没有自动滑动。