微信小程序实现顶部选项卡(swiper)

发布时间：2020-12-14 20:13:09 所属栏目：资源来源：网络整理

导读：微信小程序顶部选项卡在开发中是非常常用的，下面用一点时间实现了一下。效果图：下面直接上代码: wxml: swiper current="{{currentTab}}" class="swiper" duration="300" style="height:{{winHeight - 30}}px" bindchange="bindChange" 页面一页面二页

微信小程序顶部选项卡在开发中是非常常用的，下面用一点时间实现了一下。

效果图：

下面直接上代码:

wxml:

页面一

页面二

页面三

wxss:

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
})
}
},/**

页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {

},/**

页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},/**

用户点击右上角分享
*/
onShareAppMessage: function () {

}
})

以上是实现过程，总体上没什么难度。可以参考参考。

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!