前言

小程序开发中，有很多封装好的控件供开发者使用，但是，很常见的tab选项卡居然没有。。。哎，像安卓中还有TabLayout结合ViewPager使用，没办法，自己撸一个。

效果图

实现

wxml布局代码

首先我们要在wxml中把布局写好，有几个tab就添加几个view，下面的内容我们使用swiper来实现

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

  <!--内容布局-->
  <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切换时会调用
  pagechange: function (e) {
    if ("touch" === e.detail.source) {
      let currentPageIndex = this.data.currentIndex
      currentPageIndex = (currentPageIndex + 1) % 2
      this.setData({
        currentIndex: currentPageIndex
      })
    }
  },
  //用户点击tab时调用
  titleClick: function (e) {
    let currentPageIndex =
      this.setData({
        //拿到当前索引并动态改变
        currentIndex: e.currentTarget.dataset.idx
      })
  }

原理

其实呢，实现原理也很简单，无非是用给view(tab)设置一个点击事件bintap，并且给view(tab)一个data-idx索引，根据当前index来改变tab的状态并决定swiper显示那个内容，改变swiper的内容只需要改变swiper的current就好，官方文档

那么当内容改变时，我们也要改变tab选项卡的状态，这时候我们给swiper来一个bindchange，同样是官方文档

尾声

OK，本期教学就到此结束了，希望能帮到大家，偷偷告诉你们，本期文章全是以代码形式贴出来的，要用的直接拷贝就行。