微信小程序-實現tab

小程序開發中,有很多封裝好的控件供開發者使用,但是,很常見的tab選項卡居然沒有,隻能自己搞一個。

實現原理也很簡單,無非是用給view(tab)設置一個點擊事件bintap,并且給view(tab)一個data-idx索引,根據當前index來改變tab的狀态并決定swiper顯示那個内容,改變swiper的内容隻需要改變swiper的current就好。

 

二、效果

 

三、實現

wxml

<view class='ticket-container'>
    <scroll-view scroll-y bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}"
      scroll-top="{{scrollTop}}">
      <!--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/mine/mine.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    currentIndex: 0,
    "firstList": [{ name: 'w券1', money: '5.00' }, { name: 'w券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) {
    if ("touch" === e.detail.source) {
      let currentPageIndex = this.data.currentIndex
      currentPageIndex = (currentPageIndex + 1) % 3
      this.setData({
        currentIndex: currentPageIndex
      })
    }
  },
  //用戶點擊tab時調用
  titleClick: function (e) {
    let currentPageIndex =
      this.setData({
        //拿到當前索引并動态改變
        currentIndex: e.currentTarget.dataset.idx
      })
  }

})

wxss文件

.container {
  height: 100%;
  min-height: 100%;
  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%;
  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
}

 

四、參考官方文檔

那麼當内容改變時,我們也要改變tab選項卡的狀态,這時候我們給swiper來一個bindchange,同樣是官方文檔

 

猜你喜歡