微信小程序里沒(méi)有自帶選項(xiàng)卡組件,但是卻帶有swiper組件,所以,我們便利用swiper來(lái)實(shí)現(xiàn)選項(xiàng)卡的功能。
先看效果圖:
wxml代碼:
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> 12 |
js代碼
32 var app=getApp() 33 Page({ 34 data:{ 35 currentTab:0 36 }, 37 onLoad:function(options){ 38 // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù) 39 40 }, 41 //滑動(dòng)切換 42 swiperTab:function( e ){ 43 var that=this; 44 that.setData({ 45 currentTba:e.detail.current 46 }); 47 }, 48 //點(diǎn)擊切換 49 clickTab: function( e ) { 50 51 var that = this; 52 53 if( this.data.currentTab === e.target.dataset.current ) { 54 return false; 55 } else { 56 that.setData( { 57 currentTab: e.target.dataset.current 58 }) 59 } 60 } 61 62 }) |
css代碼
18 .swiper-tab{ 19 width: 100%; 20 border-bottom: 2rpx solid #ccc; 21 text-align: center; 22 height: 88rpx; 23 line-height: 88rpx; 24 font-weight: bold; 25 } 26 .swiper-tab-item{ 27 display: inline-block; 28 width: 33.33%; 29 color:red; 30 } 31 .active{ 32 color:aqua; 33 border-bottom: 4rpx solid red; 34 } |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)