1. <template>
    2.     <view class='pics'>
    3.         <scroll-view class='left' scroll-y>
    4.             <view :class="active === index?'active':''" v-for='(item,index) in cates' :key='item.id' @click="leftClickHandle(index)">{{item.title}}</view>
    5.         </scroll-view>
    6.     </view>
    7. </template>
    9. <script>
    10.     export default {
    11.         data() {
    12.             return {
    13.                 cates:[],
    14.                 active:0
    15.             };
    16.         },
    17.         methods:{
    18.             async getPicsCate(){
    19.                 const res = await this.$myRequest({
    20.                     url:'/api/getimgcategory'
    21.                 })
    22.                 this.cates = res.data.message
    23.             },
    24.             leftClickHandle(index){   //点击一下就变成高亮
    25.                 this.active = index
    26.             }
    27.         },
    28.         onLoad(){
    29.             this.getPicsCate()
    30.         }
    31.         }
    32. </script>
    34. <style lang="scss">
    35. page{
    36.     height:100%;
    37. }
    38. .pics{
    39.     height:100%;
    40.     .left{
    41.         width:200rpx;
    42.         height:100%;
    43.         border-right:1px solid #eee;
    44.         view{
    45.             height:60px;
    46.             line-height:60px;
    47.             color:#333;
    48.             text-align: center;
    49.             font-size:35rpx;
    50.             border-top:1px solid #eee;
    51.         }
    52.         .active{
    53.             background: $shop-color;
    54.             color:#fff;
    55.         }
    56.     }
    58. }
    59. </style>

    image.png
    一定要注意函数绑定以及动态绑定。data数据的应用