微信小程序实现tab左右切换效果
发布时间：2020-12-14 20:04:16 所属栏目：资源 来源：网络整理
导读：本文实例为大家分享了微信小程序实现tab左右切换展示的具体代码，供大家参考，具体内容如下 分析 1、设置data-current属性用于：点击当前项时，通过点击事件swichNav中处理e.dataset.current取到点击的目标值。 2、swiper组件的current组件用于控制当前显示
|
本文实例为大家分享了微信小程序实现tab左右切换展示的具体代码，供大家参考，具体内容如下 分析1、设置data-current属性用于：点击当前项时，通过点击事件swichNav中处理e.dataset.current取到点击的目标值。 2、swiper组件的current组件用于控制当前显示哪一页 3、swiper组件绑定change事件switchTab，通过e.detail.current拿到当前页 wxml: {{navItem.text}}
------------------------------------------------
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
});
}
})
效果图： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |