自写选择框，全选框

最新推荐文章于 2024-06-20 22:03:11 发布

几度风雨见丹心

最新推荐文章于 2024-06-20 22:03:11 发布

阅读量190

点赞数

分类专栏： uniapp JS 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/mmwanwen/article/details/125506417

版权

uniapp 同时被 2 个专栏收录

22 篇文章 6 订阅

订阅专栏

16 篇文章 0 订阅

订阅专栏

技术：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;
	}
}