技術標籤：uni-appuni-app

列表滾動使用檢視滑動元件：文件

切換樣式使用動態class或者style來繫結：文件

demo示例

demo程式碼

html

<scroll-view scroll-x="true" class="list-box ">
      <view class="list-item" :class="currentIndex== index?'active':''" v-for="(item,index) in list" :key
 
="index"
                 @click="chooseItem(index)">
             <image :src="item.url" mode="" class="list-item-img"></image>
             <p>{{item.title}}</p>
     </view>
</scroll-view>

1. 設定一個當前選中的下標值 “currentIndex”，預設為0
2. 點選其中一個元素時，將選中元素的下標賦值給“currentIndex”，切換樣式

css

.list-box{
　　　　width: 100%;
       overflow: hidden;
       white-space: nowrap;
}

.list-item{
　　　　display: inline-block;
}

1. 橫向滾動：列表容器寬度需為100%，溢位隱藏，不允許換行

js

chooseItem(index) {
    this.currentIndex= index                
},

好啦，總結完畢。