微信小程序-实现tab选项卡

原代码处：松宝写代码

修改了原代码滑动bug（第一个滑到第二，第二个滑不到第一个，直接到第三个）

微信小程序tab选项卡

一、效果

二、代码

wxml：

<view class='ticket-container'>
    <scroll-view scroll-y bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" 
      scroll-top="{{scrollTop}}" refresher-enabled="{{true}}" refresher-background="#ff00ff">
      <!--Tab布局-->
      <view class='title'>
        <view class="{{0 == currentIndex ? 'title-sel-selected' : 'title-sel'}}" bindtap='titleClick' data-idx='0'>
          <text>未使用</text>
          <hr class="line-style"/>
        </view>
        
        <view class="{{1 == currentIndex ? 'title-sel-selected' : 'title-sel'}}" bindtap='titleClick' data-idx='1'>
          <text>已使用</text>
          <hr class="line-style"/>
        </view>
        <view class="{{2 == currentIndex ? 'title-sel-selected' : 'title-sel'}}" bindtap='titleClick' data-idx='2'>
          <text>已过期</text>
          <hr class="line-style" />
        </view>
      </view>
 
      <!--内容布局-->
      <swiper class='swiper' bindchange='pagechange' current='{{currentIndex}}'>
        <swiper-item class='swiper'>
          <view wx:for="{{firstList}}" wx:for-item="item" class='record-item'>
            <view class='name'>
              <span>名称：{{item.name}}</span>
              <span>面额：{{item.money}}</span>
            </view>
          </view>
        </swiper-item>
        <swiper-item class='swiper' class='swiper'>
          <view wx:for="{{secondList}}" wx:for-item="item" class='record-item'>
            <view class='name'>
              <span>名称：{{item.name}}</span>
              <span>面额：{{item.money}}</span>
            </view>
          </view>
        </swiper-item>
        <swiper-item class='swiper' class='swiper'>
          <view wx:for="{{thirdList}}" wx:for-item="item" class='record-item'>
           <view class='name'>
              <span>名称：{{item.name}}</span>
              <span>面额：{{item.money}}</span>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </scroll-view>
</view>

js

// pages/tab/tab.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentIndex: 0,
    "firstList": [{
      name: '未使用券1',
      money: '5.00'
    }, {
      name: '未使用券2',
      money: '50.00'
    }, {
      name: '未使用券2',
      money: '50.00'
    }, {
      name: '未使用券2',
      money: '50.00'
    }, {
      name: '未使用券2',
      money: '50.00'
    }, {
      name: '未使用券2',
      money: '50.00'
    }, {
      name: '未使用券2',
      money: '50.00'
    }, {
      name: '未使用券2',
      money: '50.00'
    }, {
      name: '未使用券2',
      money: '50.00'
    }, {
      name: '未使用券2',
      money: '50.00'
    }, {
      name: '未使用券2',
      money: '50.00'
    }, {
      name: '未使用券2',
      money: '50.00'
    }, {
      name: '未使用券2',
      money: '50.00'
    }, {
      name: '未使用券2',
      money: '50.00'
    }],
    "secondList": [{
      name: 'y券1',
      money: '10.00'
    }, {
      name: 'y券2',
      money: '20.00'
    }],
    "thirdList": [{
      name: 'g券1',
      money: '30.00'
    }, {
      name: 'g券2',
      money: '40.00'
    }],

  },

  //swiper切换时会调用
  pagechange: function (e) {
    console.log(e);
    if ("touch" === e.detail.source) {
      let currentPageIndex = this.data.currentIndex;
      if (currentPageIndex < e.detail.current) {
        currentPageIndex = (currentPageIndex + 1) % 3
      } else {
        currentPageIndex = (currentPageIndex - 1) % 3
      }
      this.setData({
        currentIndex: currentPageIndex
      })
    }
  },
  //用户点击tab时调用
  titleClick: function (e) {
    let currentPageIndex =
      this.setData({
        //拿到当前索引并动态改变
        currentIndex: e.currentTarget.dataset.idx
      })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

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

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

wxss

/* pages/tab/tab.wxss */
.ticket-container {
  height: 100%;
  min-height: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
 
.title {
  width: 100%;
  height: 88rpx;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
 
.title-sel {
  color: #24272c;
  font-size: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.title-sel  .line-style{
  background: #fff;
  height: 6rpx;
  width: 40rpx;
  position: relative;
  margin-top: 10rpx;
}
 
.title-sel-selected{
  color: #006bff;
  font-size: 32rpx;
  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: 90%;
  height: calc(100vh - 88rpx);
  flex: 1;
  overflow: scroll;
  margin: 0 auto;
}
 
.record-item {
  margin-top: 10rpx;
  background-color: white;
  padding-bottom: 5rpx;
  padding-top: 5rpx;
  font-size: 30rpx;
}
 
.name{
  display: flex;
  justify-content: space-between;
  border: 1px solid #eee;
  padding: 2vh;
  border-radius: 10rpx
}