本文实例为大家分享了微信小程序实现tab左右切换展示的具体代码，供大家参考，具体内容如下
分析
1、设置data-current属性用于：点击当前项时，通过点击事件swichNav中处理e.dataset.current取到点击的目标值。
2、swiper组件的current组件用于控制当前显示哪一页
3、swiper组件绑定change事件switchTab，通过e.detail.current拿到当前页
wxml:
Box">
Box" srcoll-left="{{navScrollLeft}}"
srcoll-width-animation="{{true}}">
{{navItem.text}}
------------------------------------------------
Box" current="{{currentTab}}" duration="300" bindchange="switchTab">
Box" bindtap="navigateUrl" data-url="/pages/index/index">
Box weui-main">
Box">
{{tabItem.text}}@H_502_28@
{{tabItem.text}}@H_502_28@
￥{{tanItem.cost}}@H_502_28@
JS
{
this.setData({
userInfo: res.userInfo,hasUserInfo: true
})
}
}
else {
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,hasUserInfo: true
})
}
})
}
wx.getSystemInfo({
success: (res) => {
this.setData({
pixelRatio: res.pixelRatio,windowHeight: res.windowHeight,windowWidth: res.windowWidth
})
}
})
},// 滑动事件
// 点击标题切换当前页时改变样式
switchNav(event) {
var cur = event.currentTarget.dataset.current;
if (this.data.currentTab == cur) {
return false;
} else {
this.setData({
currentTab: cur
})
}
},// 滚动切换标签样式
switchTab(event) {
var cur = evnet.detail.current;
var singeNavWidth = this.data.windowWidth / 5;
this.setData({
currentTab: cur,navScrollLeft: (cur - 2) * singleNavWidth
});
}
})
效果图：
原文链接：https://www.f2er.com/weapp/30290.html