uniapp 微信小程序开发，需要一个复选弹窗。记录一下。

弹窗复选代码

<template>
	<view>
		<view @click="show=true">
			<view class="typedown">
				<image class="kuai" src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/home/icon_kuai.png"
					mode=""></image>
				<text>全部</text>
				<image class="down" src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/home/icon_down.png"
					mode=""></image>
			</view>
		</view>
		<u-popup :show="show" mode="bottom" bgColor="transparent">
			<view class="popupwin">
				<div class="popTitle">
					筛选
				</div>
				<div class="close" @click="getHide">
					<u-icon name="close"></u-icon>
				</div>
				<scroll-view class="searchbody" scroll-y>
					<div class="list">
						<div @click="getactive(index)" :class="{active:item.active}" class="listitem"
							v-for="(item,index) in list" :key="index">
							<text>{{item.name}}</text>
							<div v-if="item.active" class="icon">
								<image
									src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/home/icon_selectedcheck.png"
									mode="widthFix">
								</image>
							</div>
						</div>
					</div>
				</scroll-view>
				<div class="operation">
					<div class="reset">重置</div>
					<div class="confirm" @click="returnlist">确认</div>
				</div>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show: false,
				active: 0,
				list: [{
					name: '全部',
					active: false,
				}, {
					name: '石子',
					active: false,
				}, {
					name: '石粉',
					active: false,
				}],
			}
		},
		computed: {
			name: function() {
				var that = this;
				return this.list[that.active].name
			}
		},
		props: {
			datastr: {
				type: String,
				default () {
					return '';
				}
			}
		},
		mounted() {},
		methods: {
			getHide() {
				this.show = false
			},
			returnlist() {
				var list = []
				this.list.forEach((type) => {
					if (type.active) {
						list.push(type.name)
					}
				});
				this.$emit('getdata', list.join(","))
				this.getHide()
			},
			getactive(index) {
				var that = this;
				this.list[index].active = !this.list[index].active
			},
		}
	}
</script>

<style scoped lang="scss">
	.popupwin {
		width: 750rpx;
		// height: 750rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0px 0px;
		opacity: 1;
		position: relative;
		z-index: 1000;
	}

	.list {
		width: 694rpx;
		margin: 0 auto;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		flex-direction: row;
		align-content: flex-start;

		.listitem {
			height: 72rpx;
			padding: 0 45rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
			background: #FFFFFF;
			border-radius: 12rpx;
			border: 2rpx solid rgba(21, 24, 82, 0.1);
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			position: relative;

			text {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #737497;
			}
		}

		.listitem.active {
			border: 2rpx solid #3F87FF;

			text {
				color: #4087FF;
			}
		}
	}

	.searchbody {
		height: 550rpx;
	}

	.close {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		z-index: 10;
	}
	.popTitle {
		height: 100rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		font-size: 32rpx;
		color: #000;
		margin-left: 28rpx;
	}
	.typedown {
		width: 171rpx;
		height: 60rpx;
		background: #F5F6FC;
		border-radius: 8rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;

		.kuai {
			width: 24rpx;
			height: 23rpx;
		}

		text {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #151852;
			margin-left: 9rpx;
			margin-right: 23rpx;
		}

		.down {
			width: 21rpx;
			height: 13rpx;
		}
	}
	.icon {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;
		width: 36rpx;
		position: absolute;
		right: 0;
		bottom: 0;

		image {
			width: 36rpx;
		}
	}

	.operation {
		width: 694rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;
		margin: 0 auto;
		padding-bottom: 64rpx;

		.reset {
			width: 333rpx;
			height: 88rpx;
			background: rgba(#4087FF, 0.1);
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #4087FF;
		}

		.confirm {
			width: 333rpx;
			height: 88rpx;
			background: #4087FF;
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #fff;
		}
	}
</style>

gitee

gitee