微信小程序手写一个简单的Tab

WXML:

Tab1
Tab2
Tab3
Tab4
Tab5
Tab6

JS:

data: {
counter:1,
showElementCounts:4,
leftElementCounts:2,
allElementCounts:6,
tabElements:[1,1,1,1,0,0]
},
_clickMove:function(e){
let counter = this.data.counter;
let tabElements = this.data.tabElements;
let mode = e.currentTarget.dataset.mode;
if('left'==mode){
if(counter>0){
tabElements[counter-1]=1;
tabElements[counter+this.data.showElementCounts-1]=0;
counter -= 1;
}
counter=counter==0?1:counter;
}else{
if(counter<=this.data.leftElementCounts){
tabElements[counter-1]=0;
tabElements[counter+this.data.showElementCounts-1]=1;
counter=counter==this.data.leftElementCounts?this.data.leftElementCounts:counter += 1;
}
}
this.setData({counter:counter,tabElements:tabElements});
},

WXSS:

.main {
/* height: 200px; */
display: flex;
justify-content: space-between;
}
.left{
width: 60rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
}
.right{
width: 60rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
}
.middle{
width: 100%;
display:flex;
justify-content: space-around;
}
.one {
width: 30%;
height: 60rpx;
line-height: 60rpx;
text-align: center;
}
.two {
width: 30%;
height: 60rpx;
line-height: 60rpx;
text-align: center;
}
.three {
width: 30%;
height: 60rpx;
line-height: 60rpx;
text-align: center;
}
.four {
width: 30%;
height: 60rpx;
line-height: 60rpx;
text-align: center;
}
.five {
width: 30%;
height: 60rpx;
line-height: 60rpx;
text-align: center;
}
.six{
width: 30%;
height: 60rpx;
line-height: 60rpx;
text-align: center;
}