</swiper>
2.javascript逻辑代码演示：
/**
* 页面的初始数据
*/
data: {
winHeight: "", //窗口高度
currentTab: 0, //预设当前选项的index ,这里可以直接设置swiper对应的index
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)
})
})
},
通过以上两部分代码即可实现一个手机网站制作中的选项卡切换，同时支持数据的动态获取及导航的动态获取。
