默认

• 样式图例

• 示例代码

js代码

Page({
  data: {
    TabCur: 0,
    scrollLeft:0
  },
  tabSelect(e) {
    this.setData({
      TabCur: e.currentTarget.dataset.id,
      scrollLeft: (e.currentTarget.dataset.id-1)*60
    })
  }
})

<scroll-view scroll-x class="bg-white nav" scroll-with-animation scroll-left="{{scrollLeft}}">
  <view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:for="{{10}}" wx:key bindtap="tabSelect" data-id="{{index}}">
    Tab{{index}}
  </view>
</scroll-view>

居中

• 样式图例

• 示例代码

<scroll-view scroll-x class="bg-white nav text-center">
  <view class="cu-item {{index==TabCur?'text-blue cur':''}}" wx:for="{{3}}" wx:key bindtap="tabSelect" data-id="{{index}}">
    Tab{{index}}
  </view>
</scroll-view>

平分

• 样式图例

• 示例代码

<scroll-view scroll-x class="bg-white nav">
  <view class="flex text-center">
    <view class="cu-item flex-sub {{index==TabCur?'text-orange cur':''}}" wx:for="{{4}}" wx:key bindtap="tabSelect" data-id="{{index}}">
      Tab{{index}}
    </view>
  </view>
</scroll-view>

背景

• 样式图例

• 示例代码

<scroll-view scroll-x class="bg-red nav text-center">
  <view class="cu-item {{index==TabCur?'text-white cur':''}}" wx:for="{{3}}" wx:key bindtap="tabSelect" data-id="{{index}}">
    Tab{{index}}
  </view>
</scroll-view>

图标

• 样式图例

• 示例代码

<scroll-view scroll-x class="bg-green nav text-center">
  <view class="cu-item {{0==TabCur?'text-white cur':''}}" bindtap="tabSelect" data-id="0">
    <text class="cuIcon-camerafill"></text> 数码
  </view>
  <view class="cu-item {{1==TabCur?'text-white cur':''}}" bindtap="tabSelect" data-id="1">
    <text class="cuIcon-upstagefill"></text> 排行榜
  </view>
  <view class="cu-item {{2==TabCur?'text-white cur':''}}" bindtap="tabSelect" data-id="2">
    <text class="cuIcon-clothesfill"></text> 皮肤
  </view>
</scroll-view>