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;       // 行高 看設(shè)計稿更改
}
.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,
      })
    }
  },