微信小程序实现tab选项卡

最近做微信小程序优惠券时需要用到tab组件，然后发现微信小程序没有封装好的tab组件。只好自己写了一个。

1.老规矩先上效果图

 

 

 

2.代码实现

wxml

<view class="ct-tab">
<scroll-view>
 <view class="tab-title">
   <view class="{{0==currentIndex?'tab-title-selected':'tab-title-sel'}}" bindtap="tabChange" data-currentIndex="0">
    <text>未使用</text>
    <hr class="tab-sel-line"/>
   </view>
   <view class="{{1==currentIndex?'tab-title-selected':'tab-title-sel'}}" bindtap="tabChange" data-currentIndex="1">
    <text>已使用</text>
    <hr class="tab-sel-line"/>
   </view>
   <view class="{{2==currentIndex?'tab-title-selected':'tab-title-sel'}}" bindtap="tabChange" data-currentIndex="2">
    <text>已过期</text>
    <hr class="tab-sel-line"/>
   </view>
 </view>

<swiper class='swiper' bindchange='swiperchange' current='{{currentIndex}}'>
  <swiper-item class="ct-swiper-item">
    <view class="tab-content">tab1</view>
  </swiper-item>
  <swiper-item  class="ct-swiper-item">
    <view  class="tab-content">tab2</view>
  </swiper-item>
  <swiper-item  class="ct-swiper-item">
    <view  class="tab-content">tab3</view>
  </swiper-item>
</swiper>

</scroll-view>
</view>

 

 

wcss

.ct-tab {
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.tab-title {
  width: 100%;
  height: 70rpx;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
 
.tab-title-sel {
  color: #666666;
  font-size: 28rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.tab-title-selected .tab-sel-line{
  background: #FFB93F;
  height: 4rpx;
  width: 60rpx;
  position: relative;
  margin-top: 10rpx;
}
 
.tab-title-selected{
  color: #FFB93F;
  font-size: 28rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title-sel-selected .line-style{
  background: #006bff;
  height: 6rpx;
  width: 90rpx;
  position: relative;
  margin-top: 10rpx;
}
 
.swiper {
  width: 100%;
  overflow: scroll;
  margin: 0 auto;
}

.ct-swiper-item{
  width: 100%;
  overflow: scroll;
  margin: 0 auto;
}
.tab-content{
  width: 100%;
  height: 240rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

 

 

3.js

// pages/coupon/myCoupon/myCoupon.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentIndex:0,
    checkCoupon:{},
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },
  //选中改变事件
  tabChange(e) {
    this.setData({
      currentIndex: e.currentTarget.dataset.currentindex
    });
  },

  swiperchange(){

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})