微信小程序实现标签左右切换效果

本文实例为大家分享了微信小程序实现标签左右切换展示的具体代码，供大家参考，具体内容如下

分析

1、设置数据电流属性用于：点击当前项时，通过点击事件swichNav中处理e.dataset.current取到点击的目标值。

2、swiper组件的目前的组件用于控制当前显示哪一页

3、swiper组件绑定变化事件switchTab，通过e。详细信息。当前拿到当前页

wxml:

view class=' record-box ' view class=' nav ' scroll-view scroll-x=' true ' class=' nav bar-box ' Sr coll-left=' { { nav scroll ft } } ' Sr coll-width-animation=' { { true } } ' block wx : for=' { { record main } } wx : for-index=' idx ' wx : for-item=' navItem ' wx : key=' idx ' view class=' nav ' text ' : ' ' } ' data-current=' { { idx } } ' bind tap=' switch nav '标签{ { navitem。 文本} }/标签/视图/块/滚动-视图/视图-视图类='记录-英尺'开关类=' tab-box ' current=' { { current ttab } } ' duration=' 300 ' bind change=' switch tab ' swiper-item wx : for=' {[0，1，2，3]} ' wx3

page({ const app=GetApp()}数据： { Recordmian : [{ title : '插画艺术}，{ title: '工艺作品}，{ title: '服装艺术}，{ title: '三维建模}，]，tabContent: [ { title: '台灯卧室床头简约现代书房北欧宜家创意装饰个性圆球台灯床头灯，text: '台灯，成本： '1255 '，imgUrl: ' http://img。叶巍。me/zcimcdir/album/file _ 59b 8 f7b 66 ba 7f。jpg '，}，{ title: '雪域冰雪天地8寸牛乳芝士蛋糕，text: '蛋糕，成本： '15 '，imgUrl: ' http://img。叶巍。me/zcimcdir/album/file _ 59b 8 F7 b66 ba 7f。jpg '，}，]，当前选项卡3360 0 0，navcrolleft 3360 0 0 }，/事件处理函数onLoad:函数(){ //控制唱片盒随鼠标切换调整位置如果(app。全球数据。userinfo){这个。setdata({ userinfo : app。全球数据。userinfo，hasUserInfo: true })} else if(这个。数据。CAniuse){ app。用户infoready回调=RES={ this。setdata({ user info : RES . user info，hasuser info : true })} } else { wx。getuser info({ success : RES={ app。globaldata。userinfo=RES . userinfo这个。setdata({ user info : RES . user info，hasuserinfo : true })滑动事件//点击标题切换当前页时改变样式switch NaV(事件){ var cur=事件。当前目标。数据集。电流；如果(这个。数据。current tab==cur){ return false；} else { this。setdata({当前选项卡3360 cur })} }，//滚动切换标签样式开关标签(事件){ var cur=evnet。细节。电流；var singeNavWidth=this。数据。窗宽/5；这个。setdata({ current tab : cur，nav crolleft :(cur-2)* single nav width })；}})效果图：

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