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

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

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

效果图：

下面直接上代码:

wxml:

选项一

选项二

选项三

页面一

页面二

页面三

wxss:

/* pages/index/ihttp://ndex.wxss */

.swiper-tab{

width: 100%;

text-align: center;

line-height: 80rpx;

border-bottom: 1px solid #000;

display: flex;

flex-direction: row;

justify-content: center;

}

.tab-item{

flex: 1;

font-size: 30rpx;

display: inline-block;

color: #777777;

}

.on{

color: red;

border-bottom: 5rpx solid red;

}

.swiper{ display: block; height: 100%; width: 100%; overflow: hidden; }

.swiper view{

text-align: center;

padding-top: 100rpx;

}

js:

// pages/index/index.js

Page({

/**

* 页面的初始数据

*/

data: {

winWidth:0,

winHeight:0,

currentTab:0

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

var that = this;

/**

* 获取系统信息

*/

wx.getSystemInfo({

success: functionjmgmOmkULf (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 () {

}

})

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。