uni——单选、多选、复选款自定义样式、重置、搜索样式的

原创 已于 2025-08-21 14:34:31 修改 · 7.1k 阅读 · 24 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #css #uni-app

于 2022-11-28 22:05:08 首次发布
本文介绍如何在uni-app中自定义单选和多选组件的样式，包括隐藏默认样式、实现选中状态的不同视觉效果，并通过Vue.js的双向绑定处理用户的选择。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

单选

案例演示

在这里插入图片描述

案例代码

<radio-group @change="radioChange">
	<label v-for="(item, index) in radioList" :key="item.value"
		:class="index === current?'option_active item':'option_default item'">
		<view class="radioHidden">
			<radio :value="item.value" :checked="index === current" />
		</view>
		<view>{{item.value}}. {{item.title}}</view>
	</label>
</radio-group>

data() {
	return {
		// 单选题
		radioList: [{
				value: 'A',
				title: '基本法',
			},
			{
				value: 'B',
				title: '根本法'
			},
			{
				value: 'C',
				title: '一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法'
			},
			{
				value: 'D',
				title: '普通法律'
			}
		],
		current: '',
		// 单选的选中项
		radioValue: '',
	}
},
methods: {
	// 单选题
	radioChange(evt) {
		for (let i = 0; i < this.radioList.length; i++) {
			if (this.radioList[i].value === evt.detail.value) {
				this.current = i;
				break;
			}
		}
		this.radioValue = this.radioList[this.current].value
		console.log(this.radioValue);
	},
}

.item {
	display: flex;
	padding: 16rpx 27rpx;
	margin-bottom: 10rpx;
	background: #D45A53;
	border-radius: 31rpx;
	font-size: 30rpx;
	color: #FFFFFF;
}

// 选中的颜色
.option_active {
	background: #D52101;
}

// 默认颜色
.option_default {
	background: #D45A53;
}
.radioHidden {
	display: none;
}

网址

因为单选按钮不需要展示，所以需要隐藏掉
https://uniapp.dcloud.net.cn/component/radio.html

多选

案例演示

在这里插入图片描述

案例代码

<checkbox-group @change="checkboxChange">
	<label v-for="(item, index) in checkboxList" :key="item.value"
		:class="item.checked?'option_active item':'option_default item'">
		<view class="checkboxHidden">
			<checkbox :value="item.value" :checked="item.checked" />
		</view>
		<view>{{item.value}}. {{item.title}}</view>
	</label>
</checkbox-group>

data() {
	return {
		// 多选题
		checkboxList: [{
				value: 'A',
				title: '基本法',
			},
			{
				value: 'B',
				title: '根本法'
			},
			{
				value: 'C',
				title: '一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法一般法律法'
			},
			{
				value: 'D',
				title: '普通法律'
			}
		],
		// 复选的选中项
		checkValue: []
	}
},
methods: {
	// 多选题
	checkboxChange(e) {
		var items = this.checkboxList,
			values = e.detail.value;
		for (var i = 0, lenI = items.length; i < lenI; ++i) {
			const item = items[i]
			if (values.includes(item.value)) {
				this.$set(item, 'checked', true)
			} else {
				this.$set(item, 'checked', false)
			}
		}
		this.checkValue = values.sort();//将其排个序
		console.log(this.checkValue);
	}
}

.item {
	display: flex;
	padding: 16rpx 27rpx;
	margin-bottom: 10rpx;
	background: #D45A53;
	border-radius: 31rpx;
	font-size: 30rpx;
	color: #FFFFFF;
}

// 选中的颜色
.option_active {
	background: #D52101;
}

// 默认颜色
.option_default {
	background: #D45A53;
}

.checkboxHidden {
	display: none;
}

其他样式

在这里插入图片描述

代码

<checkbox-group @change="checkboxChange">
	<label v-for="(item, index) in checkboxList" :key="item.value"
		:class="item.checked?'option_active checkCss':'option_default checkCss'">
		<view class="checkboxHidden">
			<checkbox :value="item.value" :checked="item.checked" />
		</view>
		<view class="checkCircle"></view>
		<view class="checkTxt">{{item.title}}</view>
	</label>
</checkbox-group>

checkboxList: [{
		value: '1',
		title: '基本法',
	},
	{
		value: '2',
		title: '根本法'
	},
	{
		value: '3',
		title: '一般法律法'
	},
	{
		value: '4',
		title: '普通法律'
	}
],
// 复选的选中项
checkValue: [],

// 日期复选框
checkboxChange(e) {
	var items = this.checkboxList,
		values = e.detail.value;
	for (var i = 0, lenI = items.length; i < lenI; ++i) {
		const item = items[i]
		if (values.includes(item.value)) {
			this.$set(item, 'checked', true)
		} else {
			this.$set(item, 'checked', false)
		}
	}
	this.checkValue = values.sort();
	console.log(this.checkValue);
},
//日期重置
resetBtn() {
	console.log("重置");
	this.checkboxList.forEach((item) => {
		console.log(item);
		item.checked = false
	})
	this.checkValue = []
},

.checkCss {
	display: flex;
	align-items: center;
	height: 100rpx;
	border-top: 1rpx solid #E6E6E6;
	font-size: 28rpx;
}

// 选中的颜色
.option_active {
	color: orange;
	position: relative;
}

.option_active::after {
	content: '';
	position: absolute;
	left: 30rpx;
	top: 50%;
	transform: translateY(-50%);
	width: 30rpx;
	height: 30rpx;
	border-radius: 50%;
	background-color: #F47428;
}
.option_active::before{
	content: '';
	position: absolute;
	left: 35rpx;
	top: 42%;
	transform: translateY(-50%);
	width: 18rpx;
	height: 10rpx;
	border-left:2rpx solid #ffffff;
	border-bottom:2rpx solid #ffffff;
	transform: rotate(-45deg);
	z-index: 4;
}
// 默认颜色
.option_default {
	color: #000000;
	position: relative;
}

.option_default::after {
	content: '';
	position: absolute;
	left: 30rpx;
	top: 50%;
	transform: translateY(-50%);
	width: 30rpx;
	height: 30rpx;
	border-radius: 50%;
	border: 1rpx solid #484848;
	box-sizing: border-box;
}

.checkboxHidden {
	display: none;
}

.checkTxt {
	margin-left: 80rpx;
}

如果打印文字

在这里插入图片描述
在这里插入图片描述

网址

因为复选按钮不需要展示，所以需要隐藏掉，点击顺序不同时，会出现[‘D’,‘A’]的顺序，使用js拍个序即可
https://uniapp.dcloud.net.cn/component/checkbox.html

案例样式

uni+vue2+uview2.0
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

案例代码

<view class="row">
	<view class="rowLeft">订单备注</view>
	<view class="rowRight" @click="openRemark">
		<text :class="{'remarkCss':true,'garyColor': remarkValue=='',}">{{remarkValue?remarkValue:'选填，可填写配送注意事项等'}}</text>
	</view>
</view>
<!-- 备注多选 -->
<u-popup :show="remarkPup" @close="closeRemark" mode="bottom" :closeable="true">
	<view class="remarkBox">
		<view class="re_title">请选择订单备注（可多选）</view>
		<view class="chooseBox">
			<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
				<u-checkbox :customStyle="{marginBottom: '8px',height:'60rpx'}"
					v-for="(item, index) in checkboxList1" :key="index" :label="item.title"
					:name="item.title" activeColor="#54BC34">
				</u-checkbox>
			</u-checkbox-group>
		</view>
		<view style="height: 100rpx;"></view>
		<view class="confirmChoose" @click="confirmChoose">确定</view>
	</view>
</u-popup>

data() {
	return {
		// 备注多选
		checkboxValue1: [],
		checkboxList1: [],
		remarkPup: false,
		remarkValue: ''
	}
},



methods: {
	// 备注多选
	openRemark() {
		this.remarkPup = true
	},
	checkboxChange(n) {
		console.log('change', n);
	},
	closeRemark() {
		this.remarkPup = false
	},
	getRemarks() {
		this.$common.request('post', '/order/getMemoLists').then((res) => {
			if (res.code == 1) {
				this.checkboxList1 = res.data
				this.checkboxList1.map((item) => {
					item.disabled = false
				})
				console.log(this.checkboxList1);
			}
		})
	},
	confirmChoose() {
		console.log(this.checkboxValue1);
		this.remarkValue = this.checkboxValue1.join()
		this.remarkPup = false
	},
}

// 备注
.garyColor {
	color: #B8B8B8;
}

.remarkBox {
	min-height: 20vh;
	position: relative;

	.re_title {
		text-align: center;
		font-weight: bold;
		font-size: 30rpx;
		line-height: 100rpx;
	}

	.chooseBox {
		margin: 10rpx 4%;
	}

	.confirmChoose {
		position: absolute;
		bottom: 30rpx;
		left: 5%;
		width: 90%;
		border-radius: 50rpx;
		background-color: #54BC34;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		height: 80rpx;
	}
}

多选 vue3

在这里插入图片描述

<view class="tags">
	<checkbox-group @change="chooseTags">
		<label v-for="(item, index) in tagList" :key="item.value"
			:class="{'tagItem':true,'tagActive':item.checked}">
			<view class="checkboxHidden">
				<checkbox :value="item.value" :checked="item.checked" />
			</view>
			<view>{{item.title}}</view>
		</label>
	</checkbox-group>
</view>


其余写法：	
tagList.value = res.data.check_type.map(item => {
	return {
		...item,
		checked: false
	};
})

const tagList = ref([{
		value: '1',
		title: '自由的灵魂',
	},
	{
		value: '2',
		title: '孤僻'
	},
	{
		value: '3',
		title: '疯言疯语'
	},
	{
		value: '4',
		title: '风风火火的少年'
	}
])

const selectArr = ref([])//选中的多个标签

// 标签选择
function chooseTags(e) {
	const values = e.detail.value;
	tagList.value.forEach(item => {
		if (values.includes(item.value)) {
			item.checked = true;
		} else {
			item.checked = false;
		}
	});
	selectArr.value = values.sort().join(','); //将其排个序
	console.log(selectArr.value);
}

.tags {
	margin-top: 30rpx;

	.tagItem {
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		border: 1rpx solid #7E7E7E;
		font-size: 26rpx;
		color: #3D3D3D;
		display: inline-block;
		padding: 9rpx 20rpx;
		margin-right: 20rpx;
		margin-bottom: 23rpx;
	}

	.tagActive {
		background: #FFF5FA;
		border: 1rpx solid #F364B3;
		color: #F364B3;
	}

	.checkboxHidden {
		display: none;
	}
}

样式

在这里插入图片描述

代码

<view class="whiteBox">
		<view class="title">选择支付方式</view>
		<view class="methodBox">
			<radio-group name="" @change="changeRadio">
				<view class="paytype">
					<view class="left">
						<image src="/static/images/moneyIcon.png" mode="aspectFit"></image>
						<view class="info">
							<view class="p_title">余额</view>
							<view class="p_num">
								<view>当前余额 0.00</view>
								<view class="line"></view>
								<view>赠送金 0.00</view>
							</view>
						</view>
					</view>
					<view class="right">
						<radio value="yue" color="var(--nav-bg)" :checked="true" style="transform:scale(0.8)">
						</radio>
					</view>
				</view>
				<view class="paytype">
					<view class="left">
						<view class="info">
							<view class="p_title">XXX会员卡</view>
							<view class="p_row mtop23">
								<view class="p_r_col">今天可用次数: 2</view>
								<view class="p_r_col">剩余天数: 256天</view>
							</view>
							<view class="p_row mtop10">
								今天剩余可使用金额: 3元
							</view>
						</view>
					</view>
					<view class="right">
						<radio value="balance" color="var(--nav-bg)" style="transform:scale(0.8)"></radio>
					</view>
				</view>
			</radio-group>
		</view>
	</view>

// 选择支付方式
changeRadio(e) {
	console.log(e);
},

.whiteBox {
	background: #FFFFFF;
	box-shadow: 0rpx 5rpx 10rpx 0rpx rgba(225, 225, 225, 0.6);
	border-radius: 20rpx;
	margin: 0 32rpx 27rpx;
	padding-bottom: 29rpx;

	.title {
		height: 90rpx;
		font-size: 30rpx;
		color: #3F3F3F;
		font-weight: bold;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		margin: 0 30rpx;
		position: relative;

		.title_tip {
			font-size: 24rpx;
			color: #015C7D;
			font-weight: normal;
		}
	}

	.title::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 8rpx;
		height: 34rpx;
		background: #015C7D;
	}

	.border {
		border-bottom: 1rpx solid #E9E9E9;
	}
	.methodBox {
		margin: 0 33rpx 0 39rpx;

		.paytype {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 25rpx 20rpx 30rpx 22rpx;
			background: #F7F7F7;
			border-radius: 10rpx;
			margin-bottom: 22rpx;

			.left {
				display: flex;
				align-items: center;
				width: 100%;

				image {
					width: 47rpx;
					height: 47rpx;
				}

				.info {
					margin-left: 16rpx;
					color: #3F3F3F;
					width: 100%;

					.p_title {
						font-weight: bold;
						font-size: 28rpx;
					}

					.p_num {
						font-size: 24rpx;
						margin-top: 13rpx;
						display: flex;
						align-items: center;
					}

					.line {
						width: 1rpx;
						height: 24rpx;
						background: #707070;
						margin: 0 25rpx;
					}

					.p_row {
						font-size: 24rpx;
						color: #3F3F3F;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.p_r_col {
							flex: 1;
						}
					}

					.mtop23 {
						margin-top: 20rpx;
					}

					.mtop10 {
						margin-top: 12rpx;
					}
				}
			}
			.right {
				flex-shrink: 0;
			}
		}
	}
}

样式

在这里插入图片描述

代码

<view class="list">
	<view class="item" v-for="(item,index) in list" :key="index" :class="current===index?'active':''"
		@click="choosePackage(index)">
		<view class="kwh">标题</view>
		<view class="methodMoney">价格</view>
	</view>
</view>

data() {
	return {
		list: [],
		current: "",
	};
},
methods: {
	// 选择
	choosePackage(index) {
		this.current = index
	},
}

.list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 20px 20px; //行间距 列间距
	margin: 10rpx 30rpx 0;

	.active {
		background: var(--nav-bg) !important;

		.kwh {
			color: #FFFFFF !important;
		}

		.methodMoney {
			color: #FFFFFF !important;
		}
	}

	.item {
		background: #F3F3F3;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 24rpx 0;

		.kwh {
			font-weight: bold;
			font-size: 30rpx;
			color: #282828;
		}

		.methodMoney {
			font-size: 24rpx;
			color: #181818;
			margin-top: 17rpx;
		}
	}
}

多选样式 uni+vue2

在这里插入图片描述

说明

跳转传参：
i.to(/pages/son/son?id=${id.value}&station_name=${info.value.station_name.join(',')}&agent_station_ids=${info.value.agent_station_ids})

父页面传的agent_station_ids是一个数组[1,3],但是子页面接收的时候会发现数据被处理成了字符串1,3,自己再处理一下即可。这个数组是选中的站点的id。

数据格式：

station_name :‘动漫站点,电视剧站点,电影站点’
agent_station_ids：[‘1’,‘3’]
siteList:[{id:1,name:‘动漫站点’},{id:2,name:‘,电视剧站点’},{id:3,name:‘电影站点’}]
在比对时，将 item.id 转换为字符串类型以匹配 agent_station_ids.value 数组中的字符串元素

代码

<view class="list">
	<checkbox-group @change="chooseTags">
		<label v-for="(item, index) in siteList" :key="item.id"
			:class="{'item':true,'active':item.checked}">
			<view style="display: none;">
				<checkbox :value="item.id.toString()" :checked="item.checked" />
			</view>
			{{item.name}}
		</label>
	</checkbox-group>
</view>


const selectArr = ref([]) //选中的多个标签
const station_name = ref('') //已绑定的站点
const agent_station_ids = ref([])//接收选中的站点
onLoad((e) => {
	if (e) {
		agent_station_ids.value = e.agent_station_ids.split(',')
		card_id.value = e.card_id
		station_name.value = e.station_name
	}
	getListNoPage() //获取站点
})
// 站点选择
function chooseTags(e) {
	const values = e.detail.value;
	siteList.value.forEach(item => {
		if (values.includes(item.id.toString())) {
			item.checked = true;
		} else {
			item.checked = false;
		}
	});
	selectArr.value = values.join(',');
}
// 站点列表
function getListNoPage() {
	api.getListNoPage({
		search: search.value, //搜索
	}).then(res => {
		if (res.code == 1) {
			siteList.value = res.data//全部站点信息
			//对比信息,若包含选中的的id的，则变为选中状态。
			siteList.value.forEach(item => {
			    if (agent_station_ids.value.includes(String(item.id))) {
			        item.checked = true;
			    }
			});
		}
	})
}

.list {
	background: #FCFCFC;
	border-radius: 20rpx 20rpx 20rpx 20rpx;

	.item {
		font-size: 30rpx;
		color: #6C6B6B;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1rpx solid #E4E4E4;
	}

	.item:last-child{
		border: none;
	}

	.active {
		background-color: #E3ECFC;
		color: #0256FF;
	}
}

带有搜索样式的单选

<view class="row">
	<view class="rowLeft"><text class="redStar">*</text>学校</view>
	<view class="rowRight">
		<view class="pleaseChoose" @click="openSchool">
			<text
				:class="{'right':true,'grey':!schoolTxt}">{{schoolTxt?schoolTxt:'请选择学校'}}</text>
			<image src="/user/static/images/downIcon.png" mode="aspectFill"></image>
		</view>
	</view>
</view>

<!-- 学校搜索弹框 -->
<view v-if="schoolShow">
	<wh-bottom-popup :show="schoolShow" @close="closeSchoolPopup" :maskClosable="false">
		<view class="schoolBox">
			<view class="s_title">请选择学校</view>
			<view class="searchBox">
				<view class="searchLeft">
					<wh-icon name="search" size="40"></wh-icon>
					<input type="text" placeholder="请输入搜索内容" v-model="search" />
				</view>
				<view class="searchBtn" @click="searchSchool">
					搜索
				</view>
			</view>
			<scroll-view scroll-y="true" class="s_list" @scrolltolower="scrollBottom">
				<view :class="{'s_item':true,'boldSize':item.id == school_id}"
					v-for="(item,index) in schoolList" :key="index" @click="toChooseSchool(item)">
					{{item.names}}
					<view class="s_yes" v-if="item.id == school_id">
						<wh-icon name="check" color="#F364B3" size="34"></wh-icon>
					</view>
				</view>
			</scroll-view>
			<view class="s_btn" @click="schoolShow = false">确定</view>
		</view>
	</wh-bottom-popup>
</view>


const schoolTxt = ref('') //学校
const schoolShow = ref(false)
const search = ref('') //搜索内容
const schoolList = ref([]) //学校列表
const school_id = ref('') //学校id
// 关闭学校弹框
function closeSchoolPopup() {
	schoolShow.value = false
}

function searchSchool() {
	getSchoolLists()
}

function toChooseSchool(item) {
	console.log(item);
	schoolTxt.value = item.names
	school_id.value = item.id
	let userInfo = uni.getStorageSync('userInfo') || {}; // 如果不存在，则初始化为空对象
	userInfo.schoolTxt = schoolTxt.value
	userInfo.school_id = school_id.value
	uni.setStorageSync('userInfo', userInfo);
}
// 打开学校弹框
function openSchool() {
	if (!city_id.value) {
		return i.msg("请先选择省市区")
	}
	if (user.state.auth_status === 'yes' || user.state.auth_status === 'audit') {
		schoolShow.value = false
	} else {
		schoolShow.value = true
	}
}
function scrollBottom() {
		console.log(11);
	}

// 学校弹出层
.schoolBox {
	min-height: 60vh;

	.s_title {
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		color: #3D3D3D;
		line-height: 100rpx;
	}

	.searchBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
		background: #f8f8f8;
		border-radius: 50rpx;
		padding: 0 20rpx;
		margin: 0 30rpx;

		.searchLeft {
			display: flex;
			align-items: center;
			width: 100%;

			input {
				text-align: left;
				font-size: 26rpx;
				border-radius: 0;
				margin-left: 10rpx;
				width: 70%;
			}
		}

		.searchBtn {
			font-size: 28rpx;
			color: #757575;
			flex-shrink: 0;
		}
	}

	.s_list {
		height: 40vh;
		box-sizing: border-box;
		padding: 0 30rpx;

		.s_item {
			font-size: 30rpx;
			color: #3D3D3D;
			line-height: 88rpx;
			border-bottom: 1rpx solid #f8f8f8;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 10rpx;

			.s_yes {}
		}

		.boldSize {
			font-weight: bold;
		}

		.s_item:last-child {
			border: none;
		}
	}

	.s_btn {
		height: 90rpx;
		margin: 20rpx 60rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		font-weight: bold;
		background-color: #F364B3;
		color: #ffffff;
		border-radius: 60rpx;
	}
}

多选样式 -圆圈uni+vue3

<checkbox-group @change="onChoose">
	<label class="item" v-for="(item,index) in list" :key="index">
		<view class="row">
			<view class="rowItem">
				<text class="txt">设备名称：</text>
				<text class="nums">{{item.name?item.name:'无'}}</text>
			</view>
			<view class="rowItem">
				<text class="txt">设备编号：</text>
				<text class="nums">{{item.number?item.number:'无'}}</text>
			</view>
			<view class="rowItem">
				<text class="txt">设备类型：</text>
				<text class="nums">{{item.type_name?item.type_name:'无'}}</text>
			</view>
		</view>
		<view class="circle">
			<wh-icon name="checkround" color="#D4D4D4" size="50" v-if="!item.checked"></wh-icon>
			<wh-icon name="checkbox-fill" color="#007aff" size="50" v-if="item.checked"></wh-icon>
		</view>
		<view class="checkboxHidden">
			<checkbox :value="item.id.toString()" :checked="item.checked" activeBackgroundColor="#007aff"
				iconColor="#ffffff" />
		</view>
	</label>
</checkbox-group>


const devices_ids = ref('') //集合
function getAgentDevicesLists() {
	loadState.value = 2
	api.getAgentDevicesLists({
		page: page.value,
		size: size.value,
	}).then(res => {
		if (res.code == 1) {
			list.value = [...list.value, ...res.data]
			if (list.value.length < page.value * size.value) {
				loadState.value = 3
			} else {
				loadState.value = 1
			}
			list.value.forEach(item => {
				item.checked = false
			})
		}
	})
}
function onChoose(e) {
	const values = e.detail.value;
	list.value.forEach(item => {
		if (values.includes(item.id.toString())) {
			item.checked = true;
		} else {
			item.checked = false;
		}
	});
	devices_ids.value = values.join(',');
}

function confirmAdd() {
	if(!devices_ids.value){
		return i.msg("请选择设备");
	}
	api.bandDevices({
		station_id: station_id.value,
		devices_ids: devices_ids.value,
	}).then(res => {
		if (res.code == 1) {
			i.success(res.msg)
			setTimeout(()=> {
				i.back()
			}, 1000);
		}
	})
}

.checkboxHidden {
	display: none;
}

超简答的多选uni+vue3

tagList：[{dict_label: “干净整洁”, dict_value: “1”}, {dict_label: “占位严重”, dict_value: “2”},…]

<view class="evaluates">
	<block v-for="(item, index) in tagList" :key="index">
		<view class="item" :class="{'active': selectedTags.includes(index)}" @click="toggleTag(index)">
			{{ item.dict_label }}
		</view>
	</block>
</view>

const tagList = ref([]) //字典数据
const selectedTags = ref([]) // 用于存储选中的标签索引
const selectedTagLabels = ref([]); //用于存储选中的标签内容
onLoad(() => {
		getTags() //字典数据
	})
// 获取站点评论字典数据
const getTags = () => {
	api.getTags().then(res => {
		if (res.code == 200) {
			console.log(res);
			tagList.value = res.data
		}
	})
}
// 多选: 修改toggleTag函数来更新选中标签名称数组
const toggleTag = (index) => {
	// 查找当前标签是否已经被选中
	const isSelected = selectedTags.value.includes(index);
	if (isSelected) {
		// 如果已选中，则从selectedTags和selectedTagLabels中移除
		selectedTags.value = selectedTags.value.filter(item => item !== index);
		selectedTagLabels.value = selectedTagLabels.value.filter(item => item !== tagList.value[index].dict_label);
	} else {
		// 如果未选中，则添加到selectedTags和selectedTagLabels中
		selectedTags.value.push(index);
		selectedTagLabels.value.push(tagList.value[index].dict_label);
	}
}
// 提交
const onSubmit = () => {
	console.log('多选的数组索引', selectedTags.value)
	console.log('多选的数组内容', selectedTagLabels.value)
}

.evaluates {
	display: flex;
	align-items: center;
	flex-flow: wrap;
	margin-top: 30rpx;

	.item {
		font-size: 24rpx;
		color: var(--fui-color-subtitle);
		border: 1rpx solid var(--fui-color-subtitle);
		background-color: #ffffff;
		margin-bottom: 26rpx;
		margin-right: 30rpx;
		padding: 6rpx 12rpx;
		border-radius: 50rpx;
	}

	.active {
		border: 1rpx solid var(--fui-color-primary) !important;
		color: var(--fui-color-primary) !important;
		background-color: var(--fui-color-primary_1) !important;
	}
}

单选 uniapp+vue3

在这里插入图片描述

<view class="list">
	<view class="item" v-for="(item,index) in list" :key="item.id"
		:class="{ 'active': selectedId === item.id }" @click="selectedId = item.id">
		<view class="name">{{item.name}}</view>
		<view class="price">{{item.price}}元</view>
	</view>
</view>

const list = ref([{
	name: '月会员(31天)',
	price: '10.88',
	id: 1,
}, {
	name: '季会员 (91天)',
	price: '10.88',
	id: 2,
}, {
	name: '年会员 (365天)',
	price: '108.88',
	id: 3,
}])
const selectedId = ref(list.value[0]?.id || null) //初始化时默认选中第一个

.list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-gap: 30rpx 35rpx;

	.item {
		font-weight: bold;
		padding: 54rpx 10rpx;
		text-align: center;
		background: #F5F5F5;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 2rpx solid #F5F5F5;
		.name {
			font-size: 24rpx;
			color: #000000;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		.price {
			font-size: 36rpx;
			color: #D6822E;
			margin-top: 30rpx;
		}
	}
	
	/* 选中时 */
	.active {
		background: #FCF5EF !important;
		border: 2rpx solid #D6822E;
	}
}

多选 uniapp+vue2 不使用组件等

在这里插入图片描述

<!-- 宫格布局 -->
<view class="grid-container">
	<view v-for="(item, index) in permissionList" :key="item.id" class="grid-item"
		:class="{ 'selected': selectedIds.includes(item.id) }" @click="toggleSelect(item.id)">
		{{ item.name }}
	</view>
</view>
<!-- 选中的ID显示 -->
<view class="selected-ids">已选ID: {{ selectedIds.join(', ') }}</view>

data() {
	return {
		permissionList: [{
				id: 1,
				name: '收款提现'
			},
			{
				id: 2,
				name: '绑定设备'
			},
			{
				id: 3,
				name: '充电套餐'
			},
			{
				id: 4,
				name: '场地管理'
			},
			{
				id: 5,
				name: '设备管理'
			},
			{
				id: 6,
				name: '充值套餐'
			},
			{
				id: 7,
				name: '充电订单'
			},
			{
				id: 8,
				name: '充值订单'
			},
			{
				id: 9,
				name: '用户管理'
			},
			{
				id: 10,
				name: '虚拟余额'
			},
			{
				id: 11,
				name: '场地收益'
			},
			{
				id: 12,
				name: '分账管理'
			},
		],
		selectedIds: [] // 存储选中的id
	}
},
methods: {
	// 切换选中状态
	toggleSelect(id) {
		const index = this.selectedIds.indexOf(id)
		if (index === -1) {
			this.selectedIds.push(id)
		} else {
			this.selectedIds.splice(index, 1)
		}
	}
}

.grid-container {
	display: grid; // 声明一个容器
	grid-template-columns:repeat(3, 1fr);//3栏  每个宽度180rpx
	grid-gap: 30rpx 30rpx; //行间距 列间距
}

.grid-item {
	height: 70rpx;
	border-radius: 12rpx;
	background: #F7F7F7;
	margin: 10rpx;
	font-size: 28rpx;
	color: #606266;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s;

	&.selected {
		background: #EFF6FE;
		color: #2E87ED;
	}
}
.selected-ids {
	margin-top: 40rpx;
	font-size: 28rpx;
	color: #666;
	padding: 20rpx;
}

&的作用是：正确匹配同时有.grid-item和.selected的元素

该多选的回显

上个页面的传参

onEdit(item) {
	let params = {
		id: item.id,
		name: item.name,
		phone: item.phone,
		rules: item.auth[0].rules
	}
	uni.navigateTo({
		url: `/pages/index/addEdit?params=${encodeURIComponent(JSON.stringify(params))}`
	});
},

<template>
	<view class="container">
		<view class="formBox">
			<view class="row">
				<view class="left">子账户名称</view>
				<view class="right">
					<input type="text" placeholder="请输入子账户名称" v-model="name" />
				</view>
			</view>
			<view class="row">
				<view class="left">账号</view>
				<view class="right">
					<input type="text" placeholder="请输入账号" v-model="phone" />
				</view>
			</view>
			<view class="row">
				<view class="left">密码</view>
				<view class="right">
					<input type="text" placeholder="请输入密码" v-model="password" />
				</view>
			</view>
			<view class="row">
				<view class="left">确认密码</view>
				<view class="right">
					<input type="text" placeholder="请输入确认密码" v-model="consfirmPassword" />
				</view>
			</view>
		</view>

		<view class="whiteBox">
			<view class="title">请选择账户权限</view>
			<!-- 宫格布局 -->
			<view class="grid-container">
				<view v-for="(item, index) in permissionList" :key="item.id" class="grid-item"
					:class="{ 'selected': selectedIds.includes(item.id) }" @click="toggleSelect(item.id)">
					{{ item.name }}
				</view>
			</view>
		</view>
		<view style="height: 150rpx;"></view>
		<view class="footBox">
			<view class="addBtn" @click="onSave">保存</view>
		</view>
	</view>
</template>

<script>
	import common from '../../common/common.js'
	export default {
		data() {
			return {
				permissionList: [], //权限列表
				selectedIds: [], // 存储选中的id
				name: '',
				phone: '',
				password: '',
				consfirmPassword: '',
				id: ''
			}
		},
		onLoad(options) {
			if (options.params) {
				try {
					const params = JSON.parse(decodeURIComponent(options.params));
					// 初始化表单数据
					this.name = params.name || '';
					this.phone = params.phone || '';
					this.id = params.id || ''; // 编辑时才会有id
					// 处理权限ID数组
					this.selectedIds = String(params.rules || '')
						.split(',')
						.filter(Boolean)
						.map(Number)
						.filter(n => !isNaN(n));

				} catch (e) {
					console.error('参数解析失败:', e);
				}
			}
		},
		onShow() {
			this.getAuthDate()
		},
		methods: {
			// 保存
			onSave() {
				if (!this.name) {
					return common.msg("请输入子账号名称")
				}
				if (!this.phone) {
					return common.msg("请输入账号")
				}
				if (!this.password) {
					return common.msg("请输入密码")
				}
				if (!this.consfirmPassword) {
					return common.msg("请输入确认密码")
				}
				if (this.password !== this.consfirmPassword) {
					return common.msg("两次密码不一致");
				}
				let data = {
					name: this.name,
					phone: this.phone,
					password: this.password,
					rules: this.selectedIds.join(','),
					// 编辑时带ID， 添加时不带
					...(this.id && {
						id: this.id
					}),
				}
				// 动态选择接口地址
				const apiUrl = this.id ? '/agent/user/editAccout' : '/agent/user/addAccout';
				common.request('post', apiUrl, data).then(res => {
					if (res.code == 1) {
						common.msg(res.msg)
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1200);
					}
				})
			},
			// 切换选中状态
			toggleSelect(id) {
				const index = this.selectedIds.indexOf(id)
				if (index === -1) {
					this.selectedIds.push(id)
				} else {
					this.selectedIds.splice(index, 1)
				}
			},
			// 获取权限数据
			getAuthDate() {
				common.request('post', '/agent/user/auth').then(res => {
					if (res.code == 1) {
						console.log(res);
						this.permissionList = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding-top: 30rpx;
	}

	.formBox {
		margin: 0 30rpx 30rpx 30rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 0 30rpx;

		.row {
			padding: 30rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #F7F7F7;

			.left {
				font-weight: bold;
				font-size: 30rpx;
				color: #3D3D3D;
			}

			input {
				text-align: right;
				font-size: 28rpx;
			}
		}

		.row:last-child {
			border-bottom: 1px solid #F7F7F7;
		}
	}

	.whiteBox {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 30rpx;
		padding: 0 30rpx;

		.title {
			line-height: 110rpx;
			font-weight: bold;
			font-size: 30rpx;
			color: #3D3D3D;
		}

		.grid-container {
			display: grid; // 声明一个容器
			grid-template-columns: repeat(3, 1fr); //3栏  每个宽度180rpx
			grid-gap: 30rpx 30rpx; //行间距 列间距
			padding-bottom: 40rpx;
		}

		.grid-item {
			height: 70rpx;
			border-radius: 12rpx;
			background: #F7F7F7;
			margin: 10rpx;
			font-size: 28rpx;
			color: #606266;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: all 0.1s;

			&.selected {
				background: #EFF6FE;
				color: #2E87ED;
			}
		}
	}

	.footBox {
		position: fixed;
		left: 0;
		bottom: 60rpx;
		width: 100%;
		z-index: 10;

		.addBtn {
			margin: 0 30rpx;
			height: 86rpx;
			background: linear-gradient(180deg, #61BDFF 0%, #2E87ED 100%);
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>

uniapp+vue2多选

在这里插入图片描述

代码

<template>
	<view class="bodyBox">
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="item.id" @click="toggleSelection(index)"
				:class="{ 'selected-bg': item.checked }">
				<view class="title">
					<view class="checkCss">
						<image src="/static/images/uncheck.png" mode="aspectFill" v-if="!item.checked"></image>
						<image src="/static/images/check.png" mode="aspectFill" v-if="item.checked"></image>
					</view>
					设备名称：{{item.name}}
				</view>
				<view class="row">设备编号：{{item.sn}}</view>
				<view class="row" v-if="item.cm_type==3">设备类型：aaaa</view>
			</view>
		</view>
		<view style="padding: 200rpx 0;" v-if="list.length==0">
			<u-empty text="暂无数据" mode="order"></u-empty>
		</view>

		<view style="height: 130rpx;"></view>
		<view class="foot">
			<view class="networkBtn" @click="handleSubmit">绑定（{{selectedCount}}）</view>
		</view>
	</view>
</template>

<script>
	import common from '../../common/common.js'
	export default {
		data() {
			return {
				list: [],
				page: 1,
				id: 0,
			};
		},
		computed: {
			// 自动计算选中数量
			selectedCount() {
				return this.list.filter(item => item.checked).length
			},
			// 计算属性自动生成选中ID列表
			selectedIds() {
				return this.list.reduce((arr, item) => {
					if (item.checked) arr.push(item.id)
					return arr
				}, [])
			}
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id
			}
		},
		onReachBottom() {
			this.page++
			this.networkList()
		},
		onShow() {
			this.page = 1;
			this.networkList()
		},
		methods: {
			// 列表
			networkList() {
				common.request("post", "/agent/index/slave_list", {
					p: this.page
				}).then((res) => {
					if (res.code == 1) {
						// 初始化checked字段
						const processData = (data) => data.map(item => ({
							...item,
							checked: !!item.checked // 确保boolean类型
						}))
						if (this.page == 1) {
							this.list = processData(res.data.data)
						} else {
							// 保留页码回退逻辑，但增加空数据判断
							if (res.data.data.length === 0) {
								this.page--
								uni.showToast({
									title: '没有更多数据了',
									icon: 'none'
								})
							} else {
								this.list = this.list.concat(processData(res.data.data))
							}
						}
					}
				})
			},
			toggleSelection(index) {
				this.$set(this.list, index, {
					...this.list[index],
					checked: !this.list[index].checked
				})
			},

			// 提交时获取选中ID
			handleSubmit() {
				if (this.selectedCount === 0) {
					uni.showToast({
						title: '请先选择设备',
						icon: 'none'
					})
					return
				}
				common.request('post', '/agent/index/networking', {
					master_id: this.id,
					slave_ids: this.selectedIds.join(',')
				}).then(res => {
					if (res.code == 1) {
						common.msg(res.msg)
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1200);
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.bodyBox {
		padding-top: 30rpx;
	}

	.list {
		margin: 0 30rpx 0;

		.item {
			border-radius: 30rpx;
			background-color: #ffffff;
			padding: 0 30rpx 20rpx;
			margin-bottom: 20rpx;

			.title {
				height: 80rpx;
				font-weight: bold;
				border-bottom: 1px solid #F7F7F7;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;

				.checkCss {
					margin-right: 20rpx;
					width: 35rpx;
					height: 35rpx;

					image {
						width: 35rpx;
						height: 35rpx;
						display: block;
					}
				}
			}

			.row {
				margin-bottom: 10rpx;
			}
		}
	}

	.foot {
		position: fixed;
		width: 100%;
		bottom: 0;
		padding: 20rpx 30rpx;
		background-color: #F7F7F7;
		z-index: 5;

		.networkBtn {
			display: flex;
			align-items: center;
			height: 90rpx;
			background: linear-gradient(0deg, #4094F7 0%, #5EB9FF 100%);
			border-radius: 50rpx;
			justify-content: center;
			color: #ffffff;
		}
	}
</style>

uni+vue3多选

在这里插入图片描述

代码

<view class="evaluates">
	<block v-for="(item, index) in tagList" :key="index">
		<view class="item" :class="{'active': selectedTags.includes(index)}" @click="toggleTag(index)">
			{{ item.names }}
		</view>
	</block>
</view>

onShow(() => {
	getReason() //意见反馈原因
})

function getReason() {
	api.getReason({
		type: 2, //1投诉2意见反馈
	}).then(res => {
		if (res.code == 1) {
			console.log(res);
			tagList.value = res.data
		}
	})
}

const tagList = ref([]) //原因列表
const selectedTags = ref([]) // 用于存储选中的标签索引
const reasonTags = ref([]); //用于存储选中的标签内容

const toggleTag = (index) => {
	const isSelected = selectedTags.value.includes(index);
	if (isSelected) {
		selectedTags.value = selectedTags.value.filter(item => item !== index);
		reasonTags.value = reasonTags.value.filter(item => item !== tagList.value[index].names);
	} else {
		selectedTags.value.push(index);
		reasonTags.value.push(tagList.value[index].names);
	}
}
// 提交
const onSubmit = () => {
	console.log('多选的数组索引', selectedTags.value)
	console.log('多选的数组内容', reasonTags.value)
}

.evaluates {
	display: flex;
	align-items: center;
	flex-flow: wrap;
	margin-top: 30rpx;

	.item {
		font-size: 24rpx;
		color: var(--fui-color-subtitle);
		border: 1rpx solid var(--fui-color-subtitle);
		background-color: #ffffff;
		margin-bottom: 26rpx;
		margin-right: 30rpx;
		padding: 6rpx 12rpx;
		border-radius: 50rpx;
	}

	.active {
		border: 1rpx solid var(--fui-color-primary) !important;
		color: var(--fui-color-primary) !important;
		background-color: var(--fui-color-primary_1) !important;
	}
}

uniapp+vue3多选圆圈

在这里插入图片描述

<template>
	<view class="container">
		<fui-sticky>
			<navBar title="绑定站点" :leftArrow="true" :fixed="true" backgroundColor="#ffffff" title-color="#000000" />
			<view class="searchBox">
				<view class="search">
					<image class="search-img" src="/static/images/searchIcon.png" mode="aspectFill"></image>
					<input class="search-inp" type="text" v-model="initialQuery.search" placeholder="请输入搜索关键词" />
				</view>
				<view class="search-sou" @click="onSearch">搜索</view>
			</view>
		</fui-sticky>

		<view class="list">
			<view class="item" v-for="(item,index) in filteredSites" :key="index" @click="toggleSiteSelection(item.id)">
				<view class="checkCss">
					<image src="/static/images/uncheck.png" mode="aspectFill" v-if="!selectedSiteIds.includes(item.id)"></image>
					<image src="/static/images/check.png" mode="aspectFill" v-if="selectedSiteIds.includes(item.id)"></image>
				</view>
				<view class="rightInfo">
					<view class="oneRow">
						<view class="siteName">{{item.name}}</view>
						<view class="siteStatusGreen" v-if="item.status==1">正常</view>
						<view class="siteStatusRed" v-if="item.status==0">停用</view>
					</view>
					<view class="siteNumber">站点编号:XXXXXX</view>
				</view>
			</view>
		</view>

		<!-- <fui-loadmore :state="loadState" v-if="!(list.length==0&&loadState==3)"
			activeColor="var(--fui-color-primary)"></fui-loadmore>
		<fui-empty marginTop="400" v-if="loadState==3&&list.length==0" src="/static/images/empty/img_order_3x.png"
			width="400" title="暂无数据" color="#999" size="28"></fui-empty> -->
		<view style="height: 180rpx;"></view>
		<view class="footBtn" @click="handleConfirmBinding">确认绑定</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		nextTick,
		computed,
		watch
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app'
	import i from '@/libs/common/index.js'
	import api from '@/request/api'
	import {
		usePaginatedList
	} from '@/hooks/usePaginatedList'
	import {
		userStore
	} from '@/store/userStore.js'
	import {
		commonStore
	} from '@/store/commonStore.js'
	const user = userStore()
	const common = commonStore()
	const list = ref([{
			id: '001',
			name: '站点A',
			status: 1
		},
		{
			id: '002',
			name: '站点B',
			status: 0
		},
		{
			id: '003',
			name: '站点C',
			status: 1
		},
	]);

	// 选中状态管理
	const selectedSiteIds = ref([]);
	const searchQuery = ref('');
	// 过滤后的站点列表
	const filteredSites = computed(() => {
		const keyword = searchQuery.value.toLowerCase();
		return list.value.filter(site =>
			site.name.toLowerCase().includes(keyword) ||
			site.id.toLowerCase().includes(keyword)
		);
	});

	// 切换站点选中状态
	const toggleSiteSelection = (siteId) => {
		const index = selectedSiteIds.value.indexOf(siteId);
		if (index === -1) {
			selectedSiteIds.value.push(siteId);
		} else {
			selectedSiteIds.value.splice(index, 1);
		}
	};
	// 确认绑定
	function handleConfirmBinding() {
		if (selectedSiteIds.value.length === 0) {
			i.msg("请至少选择一个站点")
			return;
		}
		// 这里可以添加绑定逻辑
		console.log('绑定的站点:', selectedSiteIds.value);
	}
	
	// const fetchFunction = (query) => {
	// 	return api.getCarteamList(query)
	// }
	const initialQuery = reactive({
		car_team_id: '',
		search: '' //搜索内容
	})
	// const {
	// 	list,
	// 	fetchList,
	// 	ReachBottom,
	// 	onPullDown,
	// 	loadState
	// } = usePaginatedList(fetchFunction, initialQuery)
	// onLoad((option) => {
	// 	if (option) {
	// 		initialQuery.car_team_id = option.id
	// 	}
	// })
	// watch(
	// 	() => initialQuery.search,
	// 	(newVal, oldVal) => {
	// 		// 仅当从有值变为空时触发刷新
	// 		if (oldVal && !newVal) {
	// 			fetchList(true);
	// 		}
	// 	}
	// )
	// onShow(() => {
	// 	fetchList(true)
	// })
	// onReachBottom(() => {
	// 	ReachBottom()
	// })

	// 确定搜索
	function onSearch() {
		fetchList(true)
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.searchBox {
		background-color: #ffffff;
		padding: 24rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.search {
			overflow: hidden;
			width: 534rpx;
			height: 72rpx;
			background: #F6F7F8;
			border-radius: 60rpx;
			display: flex;
			align-items: center;
			padding: 0 28rpx;
			font-size: 28rpx;

			.search-img {
				width: 25rpx;
				height: 25rpx;
				flex-shrink: 0;
			}

			.search-inp {
				width: 100%;
				margin-left: 19rpx;
			}
		}

		.search-sou {
			font-size: 32rpx;
			color: #333333;
		}
	}

	.list {
		margin: 30rpx 30rpx 0;

		.item {
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 40rpx 24rpx;
			margin-bottom: 30rpx;
			display: flex;
			align-items: center;

			.checkCss {
				flex-shrink: 0;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 28rpx;
				}
			}

			.rightInfo {
				width: 100%;

				.oneRow {
					width: 100%;
					display: flex;
					justify-content: space-between;

					.siteName {
						font-weight: bold;
						font-size: 30rpx;
						color: #3D3D3D;
					}

					.siteStatusGreen {
						width: 80rpx;
						height: 42rpx;
						background: #E5F5DC;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-weight: bold;
						font-size: 24rpx;
						color: #7FCF50;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-shrink: 0;
					}

					.siteStatusRed {
						width: 80rpx;
						height: 42rpx;
						background: #FFE2E2;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-weight: bold;
						font-size: 24rpx;
						color: #FF4D4F;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-shrink: 0;
					}
				}

				.siteNumber {
					margin-top: 12rpx;
					font-size: 24rpx;
					color: #666666;
				}
			}

		}
	}

	.footBtn {
		width: 690rpx;
		height: 88rpx;
		background: #0256FF;
		border-radius: 100rpx 100rpx 100rpx 100rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 30rpx;
		bottom: 90rpx;
	}
</style>
uniapp小程序增加自定义复选框样式
欢迎来到瑆箫博客，专为程序员和编程爱好者打造的技术博客。我们分享编程语言趋势、开发工具、编程哲学、职业发展等，助你掌握新技术，优化技能，激发编程热情。
07-19 816
uniapp小程序增加自定义复选框样式。
uniapp - [全端兼容] 详细实现多选弹框选择器，弹框形式的列表多选选择器组件插件（底部弹框式列表多选功能，支持数据回显、动态数据、主题色等配置），提供详细示例代码，一键复制运行即可！
🏆 前端领域优质创作者
07-04 4698
uniapp小程序H5网页安卓苹果app端列表多选功能，uniapp弹框多选插件，uniapp多选弹框组件，uniapp多选弹框组件，uniappselect多选选择器，uniapp多项选择器，uniapp可以多选的弹框组件，uniapp弹框内可以多选的功能插件，uniapp可以选择多个值的选择器，同时又可以单选和全选，uniapp多选下拉框，uni-app实现列表数据选中多个功能，uniapp列表多选如何回显数据，uniapp多选怎么回显数据，下拉选择框，uniapp弹框式列表多选，unia
uni-app——下拉框多选
Tianxiaoxixi的博客
08-04 1万+
uni-app——下拉框多选
uniapp开发微信小程序picker-view 组件修改选中框的样式
Add_kfxb的博客
04-18 3353
uniapp开发微信小程序picker-view 组件修改选中框的样式
uni-app实现单选，多选搜索
最新发布
Made In SQL
07-12 769
选择触发方式时需权衡用户体验：实时触发更便捷，但可能增加请求频率；按钮触发更可控，但需额外操作。在实际开发中，和是常见的UI组件组合，特别适合多选场景。作为容器，可以统一管理多个的状态，并通过事件监听用户的选择变化。例如： 每个的属性用于标识选项，用户勾选或取消勾选时，会触发事件，并返回当前选中的值数组。为了高效管理用户的多选结果，建议在页面的中定义一个数组（如）来存储选中的值。在事件处理函数中，更新这个数组： 这样，始终与用户的选择同步，后续可以通过该数组进行搜索或其他操作。例如，若用户选中“
uniapp多选标签/多选按钮/多选框源码
12-01
该项目用hbuilder可直接导入运行，实现多选框操作，对于初学者，学习遍历，动态给样式赋值。
【uniapp】单选框、复选框点击整行选中效果实现
Komorebi_00的博客
05-15 1254
单选框 <view class="list-item" v-for="(item, index) in cardList" :key="index" @click="radioChange(item)"> <image class="list-item-icon" :src="item.bankUrl" mode=""></image> <view class="list-item-name">{{ item.bankName }}</view&
uniapp h5项目实现多选按钮/多选标签/多选框
m0_72929120的博客
04-11 2286
【代码】uniapp h5项目实现多选按钮/多选标签/多选框。
uniApp 单选多选 formSelectTag
weixin_46243213的博客
07-31 326
uniApp 单选多选 formSelectTag
小程序实现单选多选功能
12-29
小程序的单选组件radio和多选组件checkbox的样式只提供更改颜色，这对实际项目中的需求显然是不够的，所以自己模拟实现一个。 踩坑点：小程序不支持操作dom 1、模拟实现多选框： 实现思路：思路非常简单，给每个选项...
uniapp实现表格的多选功能
WaaTong的博客
07-25 1232
记录一下最近在做一个的表格数据多选功能。需求大致为支持多选、支持跨分页的连续选择、支持通过查询框后手动选择数据（
uni-app 之 picker选择器
jun_tong的博客
09-18 4850
uni-app 之 picker选择器
uni-app - 最新详细实现多选功能，点击项目时选中并高亮显示（支持全选 / 反选，以及轻松的 “回显“ 数据）点击选中并改变样式，全端兼容 H5 网页 安卓苹果App 小程序等（详细示例代码）
🏆 前端领域优质创作者
12-01 6899
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，多选，复选列表，多选列表，一键全选，一键反选，选中多个选项，并且使其高亮，取消选中，点击选中，多选选项，几个选项可点击多选，多选列表，多选标签，全选和反选，数据回显，能设置默认初始选中的多选，赋值默认数据让列表回显选中几个，列表点击选中并且高亮显示支持全选和反选，回显设置默认选择数据的功能，点击选中并改变样式，点击选中并高亮展示，复选框，胶囊椭圆形的多选，实现多选,点击选中并改变样式(可取消)，uni
uni-app开发小程序，radio单选按钮，点击可以选中，再次点击可以取消
weixin_48596030的博客
08-29 3368
uni-app开发小程序，radio单选按钮，点击可以选中，再次点击可以取消
uniapp - 强力覆盖 checkbox 复选框样式，将复选框由方框形状改为圆形、修改里面的 √ 对号大小、填充复选框背景色（改掉默认的 uniapp checkbox 系统内置组件样式）兼容全端
热门推荐
🏆 前端领域优质创作者
12-16 1万+
uniapp修改checkbox复选框样式，uniappcheckbox覆盖样式教程，uniapp修改checkbox复选框不生效，uniapp如何覆盖checkbox内置组件的样式，uniappcheckbox内置复选框组件怎么变成圆形，uniappcheckbox修改大小背景颜色等样式，uniapph5app安卓苹果小程序修改覆盖checkbox的默认样式，uniapp修改checkbox复选框样式，uni-app中更改复选框的默认样式，uniapp修改radio/checkbox(单
uniapp开发的通用条件筛选组件，支持单选框、复选框、下拉框、下拉树、时间选择等,同时兼容小程序、APP、H5
weixin_45997612的博客
02-04 3076
通用条件筛选，支持输入框、单选框、复选框、下拉框、下拉树、日期时间、日期范围、数值范围等筛选条件，兼容小程序、APP、H5。
uniapp(全端兼容) - 实现下拉单选/多选选择器组件插件，下拉选择器、下拉框多选功能，点击后底部下拉出现列表，可选择单个或多个，并在选择器上显示出来可移除（详细示例和组件源码，一键复制开箱即用）
高级前端工程师
12-18 7066
uniapp，vue3，uniapp vue3，支付宝微信小程序，h5移动端网页网站，uniapp下拉多选框，下拉列表多选器插件，底部弹框式多选选择器，uniapp v3小程序下拉多选框实例代码，uniapp picker下拉选择器(支持多选)，uniapp多端兼容的下拉框多选插件，uniapp vue3版本如何实现多选的下拉列表，实现下拉多选框，uniapp和vue3+ts创建自定义下拉选择框select组件，uniapp vue3下拉框多选，uniapp v3版本实现选择框下拉多选组件插件，uniapp
【uni-app】自定义单选框样式（图片）
得意小门生的博客
07-23 1966
说明：uni-app中的radio只能修改颜色和大小，但是往往跟设计图有所差别。下面我们就用其他方式自定义radio单选框的效果。 效果图： <view class="item flex justify-between align-items-center" v-for="(item, index) in sexs" :key="index" @click="setSex(index)"> <text>{{ item.value }}</text> <imag
uniapp自定义radio的样式，适用于微信小程序
qq_58662962的博客
01-12 2258
uniapp自定义radio的样式，适用于微信小程序环境
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值