我要评论本文实例为大家分享了微信小程序实现tab左右切换展示的具体代码，供大家参考，具体内容如下
分析
1、设置data-current属性用于：点击当前项时，通过点击事件swichnav中处理e.dataset.current取到点击的目标值。
2、swiper组件的current组件用于控制当前显示哪一页
3、swiper组件绑定change事件switchtab，通过e.detail.current拿到当前页
wxml:
<view class="record-box">
<view class="nav">
<scroll-view scroll-x="true" class="navbar-box" srcoll-left="{{navscrollleft}}"
srcoll-width-animation="{{true}}">
<block wx:for="{{recordmain}}" wx:for-index="idx" wx:for-item="navitem" wx:key="idx">
<view class="nav-item {{currenttab == idx ? 'text' : ''}}" data-current="{{idx}}"
bindtap="switchnav">
<label>{{navitem.text}}</label>
</view>
</block>
</scroll-view>
</view>
</view>
------------------------------------------------
<view class="record-ft">
<swiper class="tab-box" current="{{currenttab}}" duration="300" bindchange="switchtab">
<swiper-item wx:for="{{[0,1,2,3]}}" wx:for-item="tabitem" wx:for-index="idx" wx:key="idx"
class="tab-cnetent">
<block wx:for="{{tabcontent}}" wx:for-item="tabitem" wx:key=" ">
<view class="padding-box" bindtap="navigateurl" data-url="/pages/index/index">
<view class="weui-list-box weui-main">
<view class="weui-list-bd">
<view class="img-box">
<image src="{{tabitem}}" class="img" mode="widthfix"></image>
</view>
</view>
<view class="weui-list-ft">
<view class="weui-title">
<view class="text-flow clamp-xs font-sm">{{tabitem.title}}</view>
<view class="text">
<laber>{{tabitem.text}}</laber>
<laber>{{tabitem.text}}</laber>
</view>
</view>
<view class="weui-cost">
<view>￥<laber>{{tanitem.cost}}</laber></view>
</view>
</view>
</view>
</view>
</block>
</swiper-item>
</swiper>
</view>
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
});
}
})
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论