微信小程序 || tab栏

<view class='title'>
    <view class="{{idx == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}}" wx:for="{{tabTextList}}" wx:for-index="idx" bindtap='titleClick' data-idx='{{idx}}'>
      <text>{{item}}</text>
      <hr  />
    </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>

.title {
  width: 100%;
  height: 88rpx;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.headerLineSel {
  text-align: center;
  height: 64rpx;
  border-bottom: 6rpx solid #E73C12;
  width: 100%;
  position: relative;
  margin-top: 10rpx;
}
.headerLineSel text{
  color: #E73C12;
}
.headerLineUnsel {
  background: #fff;
  text-align: center;
  height: 64rpx;
  width: 100%;
  border-bottom: 4rpx solid #ccc;
  position: relative;
  margin-top: 10rpx;
}

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

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

Page({
  data: {
    currentIndex: 0,
    tabTextList: ['中餐', '西餐', '甜食饮品', '零食'],
    "firstList": ["LXT", "LXT", "LXT", "LXT", "LXT", "LXT"],
    "secondList": ["GFF", "GFF", "GFF", "GFF", "GFF", "GFF", "GFF", "GFF"]
  },
  titleClick: function (e) {
    this.setData({
      currentIndex: e.currentTarget.dataset.idx
    })
  }
})