uniapp h5项目实现多选按钮/多选标签/多选框

最新推荐文章于 2024-09-23 14:44:07 发布

00秃头小宝贝

最新推荐文章于 2024-09-23 14:44:07 发布

阅读量1.5k

点赞数 3

文章标签： uni-app

本文链接：https://blog.csdn.net/m0_72929120/article/details/137639901

版权

本文介绍了如何在Vue应用中实现一个可遍历数据的多选列表，包括HTML结构、JavaScript逻辑以及CSS样式的选择和取消选中操作。

摘要由CSDN通过智能技术生成

需求：实现简单多选功能，遍历数据，添加样式

1.效果图

2.以下代码粘贴到代码中，可直接运行，html代码

<view class="page index">
				<view class="list-box">
					<view v-for="(item,index) in typeList" :key="index" @click="choice(index)"
						:class="[item.selected?'selde':'noselde']">
						{{item.selected?item.title:item.title}}
					</view>
				</view>
				<view class="valueList">
					{{selectList}}
				</view>
			</view>

3.js

//给标签赋值
				typeList: [{
						selected: false,
						title: '综合类 20积分一公斤'
					},
					{
						selected: false,
						title: '金属类 20积分一公斤'
					},
					{
						selected: false,
						title: '纸类 20积分一公斤'
					},
					{
						selected: false,
						title: '纸类 20积分一公斤'
					},
					{
						selected: false,
						title: '纸类 20积分一公斤'
					}, {
						selected: false,
						title: '纸类 20积分一公斤'
					},
					{
						selected: false,
						title: '纸类 20积分一公斤'
					}
				],
				selectId: [],

//选择按钮
			choice(index) {
				console.log('index', index)
				//当再次被选中时，取消当前选中项
				if (this.typeList[index].selected == true) {
					this.typeList[index].selected = false;
					//取消选中时删除数组中的值
					for (var i = 0; i < this.selectId.length; i++) {
						if (this.selectId[i] === this.typeList[index].title) {
							this.selectId.splice(i, 1);

						}
					}
					this.selectList = this.selectId
					console.log("选中的值", this.selectId)
				} else {
					this.typeList[index].selected = true;
					this.selectId.push(this.typeList[index].title)
					for (var i = 0; i < this.selectId.length; i++) {
						console.log("选中的值", this.selectId[i])
					}
					this.selectList = this.selectId
					console.log("选中的值", this.selectId)
				}
			}

5.css

.list-box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		// padding: 16rpx;
		border-radius: 10rpx;

		view {
			width: 45%;
			height: 60upx;
			line-height: 60upx;
			text-align: center;
			margin-bottom: 30upx;

			// &:not(:nth-child(3n)) {
			// 	margin-right: calc(10% / 2);
			// }
		}
	}

	/* 已选择 */
	.selde {
		border: 1px solid #3EAAFB;
		background: #3EAAFB;
		color: #FFFFFF;
		border-radius: 20rpx;
		font-size: 20rpx;
		padding: 0 10rpx;
	}

	/* 未选择 */
	.noselde {
		border: 1px solid #959595;
		background: #FFFFFF;
		color: #959595;
		border-radius: 20rpx;
		font-size: 20rpx;
		padding: 0 10rpx;
	}

	.valueList {
		margin-top: 20rpx;
		padding: 20rpx;
		display: flex;
		justify-content: center;
	}