uni-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

.active {
　　border: 1px solid blue !important;
}

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

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

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

js

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

 

好啦，總結完畢。