uniapp选中多个效果和获取值
文章描述：
uniapp如何选中多个和获取选中的值
template
<template>
<view class="page">
<view class="list">
<view class="item" v-for="(item,index) in lists"
:class="item.has ? 'cur' : '' "
:data-id="item.id"
:data-title="item.title"
:data-index="index"
@tap="ckbotton"
>
<view class="title">{{item.title}}</view>
</view>
</view>
<button @tap="bc">保存</button>
</view>
</template>script
var _self;
export default {
data() {
return {
lists:[
{id:1,title:'111',has:false},
{id:2,title:'222',has:false},
{id:3,title:'333',has:false},
{id:4,title:'444',has:false},
{id:5,title:'555',has:false},
{id:6,title:'666',has:false},
{id:7,title:'777',has:false},
{id:8,title:'888',has:false}
]
}
},
onLoad() {
_self = this;
},
onShow() {
_self.lists[3].has = true;
},
methods: {
bc:function(e){
// console.log(e)
const query = uni.createSelectorQuery().in(this);
query.selectAll('.item.cur').boundingClientRect(data => {
//获取所有选中的
console.log(data)
var str = []
data.forEach((item,index)=>{
console.log(item.dataset.id)
str.push(item.dataset.id)
})
//数组
console.log(str)
}).exec();
},
ckbotton:function(e){
//获取坐标
var index = e.currentTarget.dataset.index;
//选中
if(_self.lists[index].has == true){
_self.lists[index].has = false;
return false;
}
//未选中
if(_self.lists[index].has == false){
_self.lists[index].has = true;
return false;
}
}
}
}style
.list{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
padding: 40upx 32upx 0 32upx;
}
.item{
display: block;
width: 100%;
height: 20upx;
background: #eee;
margin-bottom: 20upx;
text-align: left;
line-height: 20upx;
padding: 30upx 0 30upx 0upx;
border-radius: 10upx;
}
.item.cur{
background: #0091FF;
}
.title{
padding-left: 20upx;
}
发布时间：2021/11/26
发表评论