微信小程序之选项卡的实现方法

微信小程序之选项卡的实现方法

微信小程序之选项卡的实现方法

前言：

从事前端的同学们一定不会对选项卡陌生，不管是自己原生写的，还是各个UI框架里带的，我想大家都使用过很多选项卡，对选项卡的原理也足够清楚了，下面我们来在微信小程序里实现选项卡的功能。

微信小程序里没有自带选项卡组件，但是却带有swiper组件，所以，我们便利用swiper来实现选项卡的功能。

先看效果图：

实现代码：

页面代码：

一

二

三

第一屏

第二屏

第三屏

js代码：

var app=getApp()

Page({

data:{

currentTab:0

},

onLoad:function(options){

// 页面初始化 options为页面跳转所带来的参数

},

//滑动切换

swiperTab:function( e ){

var that=this;

that.setData({

currentTba:e.detail.current

});

},

//点击切换

clickTab: function( e ) {

var that = this;

if( this.data.currentTab === e.target.dataset.current ) {

return false;

} else {

that.setData( {

currentTab: e.target.dataset.current

})

}

}

})

css代码：

.swiper-tab{

width: 100%;

border-bottom: 2rpx solid #ccc;

text-align: center;

height: 88rpx;

line-height: 88rpx;

font-weight: bold;

}

.swiper-tab-item{

display: inline-blockltprodB;

width: 33.33%;

color:red;

}

.active{

color:aqua;

border-bottom: 4rpx solid red;

}

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

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