scroll-x.gif

// wxml
<view class="scroll-view-container">
  <scroll-view class="scroll-view" scroll-x="true">
    <block wx:for="{{tablist}}" wx:key="index">
      <view class="scroll-item {{tab == index ? 'isActive':''}}" bindtap="clickTab" data-tab="{{index}}">{{item.title}}</view>
    </block>
  </scroll-view>
</view>

// wxss
::-webkit-scrollbar {        // 隐藏滚动条
  width: 0;
  height: 0;
  color: transparent;
}
.scroll-view-container{
  line-height: 100rpx;       // 行高 看设计稿更改
}
.scroll-view{
  white-space: nowrap;
}
.scroll-item{
  display:inline-block;
  margin: 0 30rpx;          // 间距 按需求更改
  box-sizing: border-box;
  height: 100rpx;           // 固定高度 按需求更改
}
.isActive{
  border-bottom: 4rpx solid #ffc34d;      // 边框 按需求更改
}

// js
data: {
  tab: 0             // 默认值
},
clickTab: function (e) {
    var that = this;
    var tab = e.target.dataset.tab;
    if (that.data.tab === tab) {         // 如果点击的是同一个
      return false;
    } else {
      that.setData({
        tab: tab,
      })
    }
  },