微信小程序的头部导航栏

{{curTab===index ? ‘selected-tab’:’’}} 点击到那个，那个选项就改变

wxml代码

<scroll-view class="tab-list" scroll-x scroll-with-animation>
  <view wx:for="{{tabList}}" class="tab-item {{curTab===index ? 'selected-tab':''}}" data-index="{{index}}" bindtap="selectTab">{{item.name}}</view>
  </scroll-view>
  <swiper current="{{current}}" bindchange="swiperChange">
  <block wx:for="{{tabList}}">
  <swiper-item>{{item.name}}</swiper-item>
  </block>
  </swiper>

wcss代码

.tab-list {
  width: 100%;
  height: 88rpx;
  border-bottom: 1rpx solid #e5e5e5;
  display: inline-block;
  white-space: nowrap;
   
  }
   
  .tab-item {
  width: 140rpx;
  height: 85rpx;
  display: inline-block;
  line-height: 85rpx;
  vertical-align: middle;
  text-align: center;
  }
   
.selected-tab {
  color: #1aae18;
  border-bottom: 5rpx solid #1aae18;
  }

js代码，获取数据， let index = e.target.dataset.index;获取当前选项的值，并且改变页面和选项

Page({
  data: {
    curTab: 0,
    current: 0,
    tabList: [{
        id: 1,
        name: "分类"
      },
      {
        id: 2,
        name: "推荐"
      },
      {
        id: 3,
        name: "精品"
      }, {
        id: 4,
        name: "直播"
      },
      {
        id: 5,
        name: "广播"
      },
      {
        id: 6,
        name: "其他"
      }
    ]
  },
  selectTab(e) {
    let index = e.target.dataset.index;
    this.setData({
      curTab: index,
      current: index
    })
  },
  swiperChange(e) {
    let index = e.detail.current;
    this.setData({
      curTab: index,
      current: index
    })
  }
})