微信小程序使用swiper和scrollview做Tab标签页

说白了，就是利用轮播图的特性做Tab标签页

Page({data: {//顶部安全距离（状态栏高度）statusBarHeight: wx.getSystemInfoSync().statusBarHeight,navScrollLeft: 0,currentTab: 0,navData: [{text: 'A'},{text: 'B'},{text: 'C'},{text: 'D'},],},onLoad: function () {},switchNav(event) {var cur = event.currentTarget.dataset.current;if (this.data.currentTab == cur) {return false;} else {this.setData({currentTab: cur})}},
})


{{navItem.text}}ABCD


.tablist {height: 45px;width: 100%;box-sizing: border-box;line-height: 84rpx;background: #fff;font-size: 30rpx;color: #999;white-space: nowrap;overflow: hidden;padding: 0 20rpx;
}
.nav-item {color: #222;display: inline-block;text-align: center;width: 25%;font-size: 28rpx;
}
.nav-item.active{color: #ed413a;border-bottom: 4rpx solid #ed413a;
}
.tab-box{/* height: 74vh; */height: calc(100vh - 245px);padding-bottom: 25px;box-sizing: border-box;
}
.tab-content{overflow-y: scroll;
}

演示效果: