微信小程序顶部选项卡在开发中是非常常用的，下面用一点时间实现了一下。
效果图：
下面直接上代码:
wxml:
<swiper current="{{currentTab}}" class="swiper" duration="300" style="height:{{winHeight - 30}}px" bindchange="bindChange">
wxss:
301_30@
js:
/**
- 页面的初始数据
*/
data: {
winWidth:0,winHeight:0,currentTab:0
},/** - 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
/**
- 获取系统信息
*/
wx.getSystemInfo({
success: function (res) {
that.setData({
winWidth: res.windowWidth,winHeight: res.windowHeight
});
}
});
},bindChange: function (e) {
var that = this;
that.setData({ currentTab: e.detail.current });
},swichNav: function (e) {
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current
})
}
},/**
},/**
},/**
}
}) @H_301_30@
以上是实现过程，总体上没什么难度。可以参考参考。
原文链接：https://www.f2er.com/weapp/36821.html