本文实例为大家分享了微信小程序实现tab左右切换展示的具体代码,供大家参考,具体内容如下
分析
1、设置data-current属性用于:点击当前项时,通过点击事件swichnav中处理e.dataset.current取到点击的目标值。
2、swiper组件的current组件用于控制当前显示哪一页
3、swiper组件绑定change事件switchtab,通过e.detail.current拿到当前页
wxml:
srcoll-width-animation="{{true}}">
bindtap="switchnav">
{{navitem.text}}
------------------------------------------------
class="tab-cnetent">
{{tabitem.title}}
{{tabitem.text}}
{{tabitem.text}}
¥{{tanitem.cost}}
js
page ({
const app = getapp()
data: {
recordmian: [
{
title: "插画艺术"
},
{
title: "工艺作品"
},
{
title: "服装艺术"
},
{
title: "三维建模"
},
],
tabcontent: [
{
title: "台灯卧室床头 简约现代书房 北欧宜家创意装饰个性圆球台灯床头灯",
text: "台灯",
cost: "1255",
imgurl: "http://img.weiye.me/zcimgdir/album/file_59b8f7b66ba7f.jpg",
},
{
title: "雪域冰雪天地8寸牛乳芝士蛋糕",
text: "蛋糕",
cost: "15",
imgurl: "http://img.weiye.me/zcimgdir/album/file_59b8f7b66ba7f.jpg",
},
],
currenttab: 0,
navscrollleft: 0
},
// 事件处理函数
onload: function() {
// 控制record-box随鼠标切换调整位置
if (app.globaldata.userinfo) {
this.setdata({
userinfo: app.globaldata.userinfo,
hasuserinfo: true
})
} else if (this.data.caniuse) {
app.userinforeadycallback = res => {
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
});
}
})
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持萬仟网。
如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!