前言

小程序開發(fā)中馒索，有很多封裝好的控件供開發(fā)者使用莹妒，但是，很常見的tab選項卡居然沒有绰上。旨怠。。哎蜈块，像安卓中還有TabLayout結(jié)合ViewPager使用鉴腻，沒辦法，自己擼一個百揭。

效果圖

實現(xiàn)

wxml布局代碼

首先我們要在wxml中把布局寫好爽哎，有幾個tab就添加幾個view，下面的內(nèi)容我們使用swiper來實現(xiàn)

<view class='container'>
  <!--Tab布局-->
  <view class='title'>
    <view class='titleSel' bindtap='titleClick' data-idx='0'>
      <text>第一個選項</text>
      <hr class="{{0 == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}}" />
    </view>
    
    <view class='titleSel' bindtap='titleClick' data-idx='1'>
      <text>第二個選項</text>
      <hr class="{{1 == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}} " />
    </view>
  </view>

  <!--內(nèi)容布局-->
  <swiper class='swiper' bindchange='pagechange' current='{{currentIndex}}'>
    <swiper-item class='swiper'>
      <view wx:for="{{firstList}}" class='recordItem'>
        <view class='name'>昵稱：{{item}}</view>
      </view>
    </swiper-item>
    <swiper-item class='swiper' class='swiper'>
      <view wx:for="{{secondList}}" class='recordItem'>
        <view class='name'>昵稱：{{item}}</view>
      </view>
    </swiper-item>
  </swiper>
</view>

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;
}

.titleSel {
  color: #5f6fee;
  font-size: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.titleUnsel {
  color: #858fab;
  font-size: #858fab;
}

.headerLineSel {
  background: #5f6fee;
  height: 6rpx;
  width: 40rpx;
  position: relative;
  margin-top: 10rpx;
}

.headerLineUnsel {
  background: #fff;
  height: 6rpx;
  width: 40rpx;
  position: relative;
  margin-top: 10rpx;
}

.swiper {
  width: 100%;
  flex: 1;
  height:100vh;
  overflow: scroll;
}

.recordItem {
  margin-top: 10rpx;
  background-color: white;
  padding-bottom: 20rpx;
  padding-top: 20rpx;
}

js代碼

  data: {
    currentIndex: 0,
    "firstList": ["LXT", "LXT", "LXT", "LXT", "LXT", "LXT"],
    "secondList": ["GFF", "GFF", "GFF", "GFF", "GFF", "GFF", "GFF", "GFF"]
  },
  //swiper切換時會調(diào)用
  pagechange: function (e) {
    if ("touch" === e.detail.source) {
      let currentPageIndex = this.data.currentIndex
      currentPageIndex = (currentPageIndex + 1) % 2
      this.setData({
        currentIndex: currentPageIndex
      })
    }
  },
  //用戶點擊tab時調(diào)用
  titleClick: function (e) {
    let currentPageIndex =
      this.setData({
        //拿到當(dāng)前索引并動態(tài)改變
        currentIndex: e.currentTarget.dataset.idx
      })
  }

原理

其實呢器一，實現(xiàn)原理也很簡單课锌，無非是用給view(tab)設(shè)置一個點擊事件bintap，并且給view(tab)一個data-idx索引祈秕，根據(jù)當(dāng)前index來改變tab的狀態(tài)并決定swiper顯示那個內(nèi)容渺贤，改變swiper的內(nèi)容只需要改變swiper的current就好，官方文檔

那么當(dāng)內(nèi)容改變時请毛，我們也要改變tab選項卡的狀態(tài)志鞍，這時候我們給swiper來一個bindchange，同樣是官方文檔

尾聲

OK方仿，本期教學(xué)就到此結(jié)束了固棚，希望能幫到大家，偷偷告訴你們仙蚜，本期文章全是以代碼形式貼出來的玻孟，要用的直接拷貝就行。