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                
},

好啦，总结完毕。