uniapp点击改变列表项背景颜色,再次点击可取消(多选)

  • html
  • js
  • css

html

<view class="cu-card article" v-for="(item,index) in dataList" :key="index" @click="select(item,index)" :class="{ active: item.isSelect }"> 
	<view class="cu-item shadow">
		<view class="flex justify-between padding" style="border-bottom: 1px solid #eee;">
			<view class="text-cut">{{item.schoolname}}</view>
				<view class="text-cut fr"> <text style="color: #c3c3c3;font-size: 10px;">{{item.county?item.county.name:''}}</text>
				<view class="cu-tag bg-cyan light sm round margin-left">{{item.distance}}</view>
			</view>
		</view>
	</view>
</view>

js

select(item,index) {//选择学校
	let list = this.dataList
	if (list[index].isSelect) {
		list[index].isSelect = false
		this.sel.splice(list[index],1) //取消选中
	} else {
		list[index].isSelect = true
		this.sel.push(item.schoolname)
	}
	this.dataList = list
}

css

.active {
	background: #ccc;
	color: #ccc;
}

你可能感兴趣的:(uniapp)