微信小程序之选项卡

  • A+
所属分类:微信小程序

微信小程序之选项卡

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

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

页面代码:

  1. <view class="swiper-tab">  
  2.     <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">一</view>  
  3.     <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">二</view>  
  4.     <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">三</view>  
  5. </view>  
  6.   
  7. <swiper current="{{currentTab}}" duration="300"  bindchange="swiperTab">  
  8.     <swiper-item><view>第一屏</view></swiper-item>  
  9.     <swiper-item><view>第二屏</view></swiper-item>  
  10.     <swiper-item><view>第三屏</view></swiper-item>  
  11. </swiper>  

js代码:

  1. var app=getApp()  
  2. Page({  
  3.   data:{  
  4.     currentTab:0  
  5.   },  
  6.   onLoad:function(options){  
  7.     // 页面初始化 options为页面跳转所带来的参数  
  8.   
  9.   },  
  10.   //滑动切换  
  11.   swiperTab:function( e ){  
  12.     var that=this;  
  13.     that.setData({  
  14.       currentTba:e.detail.current  
  15.     });  
  16.   },  
  17.   //点击切换  
  18.   clickTab: function( e ) {    
  19.   
  20.     var that = this;    
  21.   
  22.     ifthis.data.currentTab === e.target.dataset.current ) {    
  23.       return false;    
  24.     } else {    
  25.       that.setData( {    
  26.         currentTab: e.target.dataset.current    
  27.       })    
  28.     }    
  29.   }    
  30.   
  31. })  

css代码:

  1. .swiper-tab{  
  2.     width: 100%;  
  3.     border-bottom: 2rpx solid #ccc;  
  4.     text-align: center;  
  5.     height: 88rpx;  
  6.     line-height: 88rpx;  
  7.     font-weight: bold;  
  8. }  
  9. .swiper-tab-item{  
  10.     display: inline-block;  
  11.     width: 33.33%;  
  12.     color:red;  
  13. }  
  14. .active{  
  15.     color:aqua;  
  16.     border-bottom: 4rpx solid red;  
  17. }  
钰玺

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: