一、ColorUI

<view class="padding flex flex-direction">
  <button class="cu-btn bg-grey lg">玄灰</button>
  <button class="cu-btn bg-red margin-tb-sm lg">嫣红</button>
</view>

<scroll-view scroll-x class="bg-white nav">
    <view class="flex text-center">
      <view class="cu-item flex-sub {{index==TabCur?‘text-green cur‘:‘‘}}" wx:for="{{5}}" wx:key bindtap="tabSelect" data-id="{{index}}">
        <text class="text-xl text-bold text-green">{{navList[index].title}}</text>
      </view>
    </view>
  </scroll-view>

<swiper current="{{TabCur}}" class=‘swiper‘ style="height:600px;" duration="300" bindchange="bindchange">
     <swiper-item>
      <view class=‘swiper_con‘>welcome come to 关注</view>
    </swiper-item>
     <swiper-item>
      <view class=‘swiper_con‘>welcome come to 推荐</view>
    </swiper-item>
     <swiper-item>
      <view class=‘swiper_con‘>welcome come to 精华</view>
    </swiper-item>
     <swiper-item>
      <view class=‘swiper_con‘>welcome come to 视频</view>
    </swiper-item>
     <swiper-item>
      <view class=‘swiper_con‘>welcome come to 娱乐</view>
    </swiper-item>
 </swiper>

Page({
  data: {
    TabCur: 0,
    scrollLeft: 0,
    navList: [{
      index: 0,
      title: "关注"
    }, {
      index: 1,
      title: "推荐"
    }, {
      index: 2,
      title: "精华"
    }, {
      index: 3,
      title: "视频"
    }, {
      index: 4,
      title: "娱乐"
    }]
  },
  tabSelect(e) {
    this.setData({
      TabCur: e.currentTarget.dataset.id,
      scrollLeft: (e.currentTarget.dataset.id - 1) * 60
    })
  }
})