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

 

好啦，总结完毕。