tab weui 页面切换_微信小程序实现tab左右切换效果

本文实例为大家分享了微信小程序实现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

});

}

})

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持萬仟网。

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！