微信小程序 选项卡的简单实例

微信小程序 选项卡的简单实例

微信小程序 选项卡的简单实例

看下效果

代码：

home.wxml

&http://lt;!--pages/home/home.wxml-->

热门

关注

好友

热门

关注

好友

home.wxss

/* pages/home/home.wxss */

.swiper-tab{

width: 100%;

border-bottom: 2rpx solid #eeeeee;

text-align: center;

line-height: 80rpx;}

.swiper-tab-item{ font-size: 30rpx;

display: inline-block;

width: 33.33%;

color: #666666;

}

.on{ color: #f10b2e;

border-bottom: 5rpx solid #f10b2e;}

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

.swiper-box view{

text-align: center;

}

home.js

// pages/home/home.js

var app = getApp()

Page({

data: {

winWidth: 0,

winHeight: 0,

// tab切换

currentTab: 0,

},

onLoad: function () {

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

})

}

}

})

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持!

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