**要在小程序里面实现一个tab栏切换的页面 但是tab的数量是动态渲染的 会很多 所有就用了scroll-view超出部分能滑动 下面就用swiper滑动切换 废话不多说 直接贴上代码吧 ** ,
-
##效果图
-
代码
wxml
// wxml
//tab头部 数据代码请省略 scroll-with-animation="true"添加动画效果很重要 不然scroll-left变换的时候会卡帧**
<scroll-view scroll-x style="width: 100%" class='soloo' scroll-left="{{scrollLeft}}" scroll-with-animation="true">
<view class="tab-item {{currentTab == index ?'active':''}}"
data-current="{{index}}" data-id="{{item.id}}"
bindtap="swichNav" wx:key="listClassify" wx:for="{{listClassify}}" wx:for-index="index">{{item.name}} </view>
</scroll-view>
//下方轮播页面
<swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab" style="height:{{winHeight}}rpx">
//请忽略循环数据文代码
<swiper-item wx:for="{{listClassify}}" wx:key='index' >
</swiper-item>
</swiper>
js代码
Page({
/**
* 页面的初始数据
*/
data: {
winHeight: "", //窗口高度
currentTab: 0, //预设当前项的值 //这里可以直接设置swiper对应的下标
scrollLeft:'', //距离左边的距离
clientWidth:'', //屏幕的宽
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
// 高度自适应
wx.getSystemInfo({
success: function(res) {
var clientHeight = res.windowHeight,
clientWidth = res.windowWidth,
rpxR = 750 / clientWidth;
var calc = clientHeight * rpxR - 88;
that.setData({
winHeight: calc,
cityid: cityid,
clientWidth: clientWidth
});
}
});
},
// 滚动切换标签样式
swichNav: function(e) {
var cur = e.target.dataset.current;
if (this.data.currentTab == cur) {
return false;
} else {
this.setData({
currentTab: cur
})
}
},
// 滚动切换标签样式
switchTab: function (e) {
this.setData({
currentTab: e.detail.current
});
this.eady()
this.huoqu(2, that.data.clasifys[e.detail.current]);
},
//获取节点宽度 把之前的相加起来 等于滚动条距离left的距离
//重点设置在这里 设置滚动条的距离
eady:function () {
var self = this;
//获取导航的初始位置
const query = wx.createSelectorQuery()
query.selectAll('.tab-item').boundingClientRect();
query.exec(function (res) {
//遍历你当前的tab栏 之前的所有dom节点的宽 相加设置为滚动条滚去的scrollLeft 就搞定了
var num=0;
for (var i = 0; i < self.data.currentTab;i++){
num += res[0][i].width
}
self.setData({
scrollLeft: Math.ceil(num)
})
})
},
// 下拉到底事件
lower(){
//这里的事件是我做分页加载的
}
})