微信小程序实现tab选项卡

2

3

4

5

6

7

8

9

10

11

12

<view class="swiper-tab">

  <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">全部</view>

  <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">提现中</view>

  <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">已提现</view>

</view>

<swiper current="{{currentTab}}" duration="300" bindchange="swiperTab">

  <swiper-item ><view>全部</view></swiper-item>

  <swiper-item><view>提现中</view></swiper-item>

  <swiper-item><view>已提现</view></swiper-item>

</swiper>

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

.swiper-tab{

  width: 100%;

  border-bottom: 2rpx solid #ccc;

  text-align: center;

  height: 88rpx;

  line-height: 88rpx;

  display: flex;

  flex-flow: row;

  justify-content: space-between;

}

.swiper-tab-item{

  width: 30%;

  color:#434343;

}

.active{

  color:#F65959;

  border-bottom: 4rpx solid #F65959;

}

swiper{

 text-align: center;

}

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

var app = getApp()

Page({

 data: {

  currentTab: 0

 },

 onLoad: function (options) {

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

 },

 //滑动切换

 swiperTab: function (e) {

  var that = this;

  that.setData({

   currentTab: 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

   })

  }

 }

})