微信小程序之選項卡的實現(xiàn)方法
發(fā)布時間：2021-06-30 09:18 所屬欄目：小程序開發(fā)教程
微信小程序里沒有自帶選項卡組件，但是卻帶有swiper組件，所以，我們便利用swiper來實現(xiàn)選項卡的功能。
先看效果圖：
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 // 頁面初始化 options為頁面跳轉所帶來的參數(shù)
39
40 },
41 //滑動切換
42 swiperTab:function( e ){
43 var that=this;
44 that.setData({
45 currentTba:e.detail.current
46 });
47 },
48 //點擊切換
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 }
|
