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"
>
{{item.title}}
</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.select('.item.cur').boundingClientRect(data => {
console.log(data)
}).exec();
},
ckbotton:function(e){
var index = e.currentTarget.dataset.index;
const query = uni.createSelectorQuery().in(this);
query.select('.cur').boundingClientRect(data => {
var indexx = data.dataset.index;
if(index != indexx){
//移除
_self.lists[indexx].has = false;
//选中
_self.lists[index].has = true;
}
}).exec();
}
}
}style
.list{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
padding: 40upx 32upx 0 32upx;
}
.item{
display: block;
width: 200upx;
height: 200upx;
background: #eee;
margin-left: 20upx;
margin-bottom: 20upx;
text-align: center;
line-height: 200upx;
}
.item.cur{
background: #0091FF;
}
.item .li:nth-child(3n+1) {
margin-left: 0;
}
发布时间：2021/11/26
发表评论