1. <template>
    2.     <view>
    3.         <page :isBack="false">
    4.             <scroll-view slot="top" scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
    5.                 <view class="flex text-center">
    6.                     <view class="cu-item flex-sub" :class="index==TabCur?'text-red cur':''" v-for="(item,index) in tabBars" :key="index"
    7.                      @tap="tabSelect"  :data-id="index">
    8.                         {{item.name}}
    9.                     </view>
    10.                 </view>
    11.             </scroll-view>
    12.         </page>
    13.     </view>
    14. </template>
    1. <script>
    2.     export default {
    3.         data() {
    4.             return {
    5.                 TabCur: 0,
    6.                 scrollLeft: 0,
    7.                 tabBars: [{
    8.                         name: '热门推荐'
    9.                     },
    10.                     {
    11.                         name: '百变穿搭'
    12.                     },
    13.                     {
    14.                         name: '美妆达人'
    15.                     },
    16.                     {
    17.                         name: '美丽配饰'
    18.                     },
    19.                     {
    20.                         name: '时尚潮男'
    21.                     }
    23.                 ]
    24.             }
    25.         },
    26.         methods: {
    27.             // 切换选项卡
    28.             tabSelect(e) {
    29.                 this.TabCur = e.currentTarget.dataset.id;
    30.                 this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
    31.             },
    32.         }
    33.     }
    34. </script>