微信小程序tab滑动效果开发代码
微信小程序tab图标有很多种类型，不同的类型对应不同的开发方式，微信小程序tab滑动效果算是比较酷炫的方式了，下面就是开发代码。
先看效果：
Page({
data: {
bodyList: [
{
id:1,
title:"美食"
},
{
id:2,
title:"鲜花"
},
{
id:3,
title:"果蔬"
}, {
id:4,
title:"蛋糕"
}, {
id:5,
title:"洗衣"
}, {
id:6,
title:"保洁"
}, {
id:7,
title:"看护"
},{
id:8,
title:"跑腿"
},{
id:9,
title:"维修"
},{
id:10,
title:"教育"
},{
id:11,
title:"出行"
},{
id:12,
title:"宠物"
},{
id:13,
title:"技能"
},{
id:14,
title:"住宿"
}
,{
id:15,
title:"生鲜"
}
,{
id:16,
title:"自驾"
}
,{
id:17,
title:"旅行"
}
,{
id:18,
title:"母婴"
},{
id:19,
title:"优惠"
},
{
id:20,
title:"其他"
}
],
activeIndex: 0,
sliderOffset: 0,
sliderLeft: 0,
},
onLoad: function (param) {
mythis = this;
wx.getSystemInfo({
success: function (res) {
mythis.setData({
windowHeight: res.windowHeight - 51, windowWidth: res.windowWidth, sliderLeft: 8, sliderOffset: res.windowWidth / mythis.data.bodyList.length * mythis.data.activeIndex
});
}
})
},
tabClick: function (e) {
var id = e.currentTarget.id;
mythis.setData({
sliderOffset: e.currentTarget.offsetLeft,
activeIndex: id,
});
}
});
{{item.title}}
如果大家能够给小程序页面添加微信小程序tab滑动的效果，这对于用户的体验来说好处是不可预计的，想要获取更多相关资料请关注微信小程序素材网。
怎样设置微信小程序tab图标
微信小程序tab标签开发教程
怎样实现微信小程序tab切换