<scroll-view class="x-tab" scroll-x wx:if="{{service_type==2}}">
          <view wx:for="{{category_list}}" wx:key="id" class="x-tab-item" data-id="{{item.id}}" catchtap="onCategoryTap">
            <view class="x-tab-item-in">
              <view class="x-tab-item {{category_current_id == item.id ? 'x-tab-item-active':'' }}">{{item.name}}</view>
            </view>
          </view>
        </scroll-view>

.x-tab {
  height: 96rpx;
  white-space: nowrap;
}

.x-tab-item {
  position: relative;
  margin: 0 30rpx;
  display: inline-block;
  height: 80rpx;
  font-size: 32rpx;

}
.x-tab-item-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 80rpx;
}
.x-tab-item {
  height: 70rpx;
  line-height: 70rpx;
  color: #363636;
}
.x-tab-item-active {
  color: var(--maincolor,#fdbf15);
  border-bottom:1rpx var(--maincolor,#fdbf15) solid;
}

 onCategoryTap(e){
    this.setData({
      category_current_id: e.currentTarget.dataset.id
    });
    this.setData({
      [`list.page`]:1,
      [`list.over`]:false,
    });
    this.loadListData();
  },