uni-app实现单选、多选改变样式
单选
<!--单选-->
<view class="company-item":class="{'active': isChange == index}"  v-for="(item, index) in list":key="index" @click="clickBtn(index)"> {{item}}
</view>
isChange:'-1',//单选
list:[],//接⼝获取到的数组
// 判断当前index 是否与 ischange 相等，不相等择改变背景为红⾊（代表选中），再次点击取消
clickBtn(index){
// 单选
if(index!=this.isChange){
this.isChange = index;
}else{
// this.isChange = -1;    //不注释则可以点击取消，注释之后点击就不再取消
}
},
多选
<!--多选-->
<view class="skill-item":class="{'active': isChange.indexOf(index)!=-1}"  v-for="(item, index) in list":key="index" @click="clickBtn(index)"> {{item}}
</view>
isChange:[],//多选
list:[],//接⼝获取到的数组
clickBtn(index){
// 多选
if(this.isChange.indexOf(index)==-1){
if(this.isChange.length ==3){
uni.showToast({
title:'最多选择三项',
icon:'none'
})
}else{
this.isChange.push(index);//选中添加到数组⾥
}
}else{
this.isChange.splice(this.isChange.indexOf(index),1);//取消选中
}
let list2 =[]
for(let index in this.isChange){
list2.push(this.list[this.isChange[index]])
}
},
样式
pany-item{
width:200rpx;
height:50rpx;
border:2rpx solid #555; border-radius:10rpx;
font-size:30rpx;
color:#555;
text-align: center;
line-height: 50rpx;
}
.active{
border:2rpx solid #DD524D; color: #DD524D;
flutter uniapp 哪个好}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。