uni-app 单选/多选/滑动 demo_radiogroup多选 uniapp-优快云博客

本文链接：https://blog.youkuaiyun.com/crazyo2jam/article/details/103914199

本文介绍了一个使用小程序实现的多选框与滑动条组件案例，详细展示了如何通过WXML和WXSS实现多选框的选中状态及滑动条的交互效果，并通过事件绑定处理用户输入。

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

在这里插入图片描述

<template>
	<view>

		<view class="uni-padding-wrap uni-common-mt">
			<view>
				<checkbox-group @change="checkboxChange2">
					<label>
						<checkbox value="多选1" checked="true" color="#FFCC33" style="transform:scale(0.7)" />选中
					</label>
					<label>
						<checkbox value="多选2" color="#FFCC33"  />未选中
					</label>
				</checkbox-group>
			</view>
		</view>
		<radio-group @change="radioChange">
			<label class="uni-list-cell uni-list-cell-pd">
				<view>
					<radio value="单选1" />
				</view>
				<view>选中1</view>
			</label>
			<label class="uni-list-cell uni-list-cell-pd">
				<view>
					<radio value="单选2" />
				</view>
				<view>选中2</view>
			</label>
		</radio-group>
		
		<view>
			<!-- @chang 是松开后的值 -->
			<slider value="50"  @changing="sliderChange" step="1" activeColor="#FFCC33" backgroundColor="#000000" block-color="#8A6DE9" block-size="20"   min="50" max="200" show-value/>
		</view>
		


	</view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		methods: {
			checkboxChange2(e){//多选=数组
				this.toast(JSON.stringify(e.detail.value))	
			},radioChange(e) {//单选
				this.toast(e.detail.value)
			},sliderChange(e) {//滑块
				console.log('value 发生变化：' + e.detail.value)
			},toast(e){
				uni.showToast({
					title:e,
					// mask:true, //蒙版
					duration:2000
				})
			}
				
				
		}
	}
</script>

<style>
.uni-list-cell {
	justify-content: flex-start
}
</style>