技术:uniapp+uview
<view @click="isManagement = true">操作</view>
<view class="list-item" v-for="(item,index) in list" :key="index">
<u-image width="100%" height="274rpx" :src=""></u-image>
<view class="checkbox" :class="{checked:checkedIndex.indexOf(item.Id) >= 0}"
@click.stop="check(item.Id)" v-if="isManagement">
<u-icon v-if="checkedIndex.indexOf(item.Id) >= 0" name="checkbox-mark"></u-icon>
</view>
<view class="item-content">
...
</view>
</view>
<view class="action-section" v-if="isManagement">
<view class="checkbox u-margin-right-16" :class="{checked:checkall}" @click.stop="checkAll()">
<u-icon v-if="checkall" name="checkbox-mark"></u-icon>
</view>
<view class="checkall-text">全选</view>
<view class="deletebutton" @click="deleteChecked">删除</view>
</view>
check(index) {
let _index = this.checkedIndex.indexOf(index)
if (_index > -1) {
// checkedIndex 数组里有这个项,取消选中
this.checkedIndex.splice(_index, 1)
} else {
// 没有这个项,选中
this.checkedIndex.push(index);
}
if (this.checkedIndex.length == this.list.length) {
//选中数组的长度等于全部数组的长度,全选成立
this.checkall = true;
} else {
this.checkall = false;
}
},
checkAll() {
this.checkall = !this.checkall;
this.checkedIndex = [];
if (this.checkall) {
// 全选
this.list.forEach((e, index) => {
this.checkedIndex.push(e.Id);
})
} else {
// 取消全选
return;
}
}
.list-item {
width: 350rpx;
margin-bottom: 16rpx;
background: #FFFFFF;
position: relative;
.checkbox {
position: absolute;
width: 34rpx;
height: 34rpx;
border-radius: 50%;
background: #FFFFFF;
top: 16rpx;
right: 16rpx;
border: 1px solid #777777;
}
.checked {
font-size: 18rpx;
text-align: center;
line-height: 34rpx;
background: #CE0032;
color: #FFFFFF;
}
.item-content {
//...
}
}
.action-section {
position: fixed;
z-index: 95;
display: flex;
align-items: center;
padding: 30rpx 26rpx;
bottom: 0;
left: 0;
right: 0;
background-color: #FFFFFF;
.checkbox {
width: 34rpx;
height: 34rpx;
border-radius: 50%;
background: #FFFFFF;
border: 1px solid #777777;
}
.checked {
font-size: 18rpx;
text-align: center;
line-height: 34rpx;
background: #CE0032;
color: #FFFFFF;
}
.checkall-text {
font-size: 30rpx;
color: #777777;
}
.deletebutton {
width: 150rpx;
height: 66rpx;
background: #FFFFFF;
border-radius: 34rpx;
border: 2rpx solid #CE0032;
font-size: 30rpx;
color: #CE0032;
line-height: 66rpx;
text-align: center;
margin-left: auto;
}
}