uni单选radio（收货地址、支付）、uni官网单选样式

耶啵奶膘

已于 2025-06-06 14:33:14 修改

阅读量724

点赞数

CC 4.0 BY-SA版权

分类专栏： uni、vue 文章标签：前端

于 2022-11-22 14:07:21 首次发布

本文链接：https://blog.csdn.net/xulihua_75/article/details/127981702

uni、vue 专栏收录该内容

160 篇文章

订阅专栏

本文介绍了一个使用UniApp实现的支付方式选择组件，通过循环遍历的方式展示不同的支付选项，并利用radio-group组件来实现单选功能。代码中详细展示了如何设置支付方式的样式和逻辑处理。

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

案例演示

在这里插入图片描述

代码

<radio-group @change="radioChange">
	<!-- 循环体start -->
	<view class="item" v-for="(item,index) in list" :key="index">
		<label>
			<radio :value="index" :checked="index === current" color="#3B5EC7"
				style="transform:scale(0.6)" /> 设为默认地址
		</label>
	</view>
	<!-- 循环体end -->
</radio-group>

案例演示

在这里插入图片描述

代码：

<!-- 支付方式模块 -->
<view class="payBox">
	<view class="title">
		支付方式：
	</view>
	<view class="payList">
		<radio-group @change="radioChange">
			<label class="item">
				<view class="twoLeft">
					<image :src="$common.image('/static/weChat.png')" mode="aspectFill">
					</image>
					<text>微信支付</text>
				</view>
				<radio value="1" :checked="payment_type == 1" color="#3B5EC7" style="transform:scale(0.7)" />
			</label>
			<label class="item">
				<view class="twoLeft">
					<image :src="$common.image('/static/zfb.png')" mode="aspectFill">
					</image>
					<text>余额支付（￥580）</text>
				</view>
				<radio value="2" :checked="payment_type == 2" color="#3B5EC7" style="transform:scale(0.7)" />
			</label>
			<label class="item">
				<view class="twoLeft">
					<image :src="$common.image('/static/offline.png')" mode="aspectFill">
					</image>
					<text>线下支付</text>
				</view>
				<radio value="3" :checked="payment_type == 3" color="#3B5EC7" style="transform:scale(0.7)" />
			</label>
		</radio-group>
	</view>
</view>

<script>
	export default {
		data() {
			return {
				payment_type: 1, //支付方式:1=微信支付,2=余额支付，3=线下支付
			}
		},
		onLoad() {

		},
		methods: {
			// 单选切换
			radioChange(e) {
				console.log(e);
				this.payment_type = e.detail.value
			},
		}
	}
</script>

// 支付方式
.payBox {
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 0 10rpx;
	margin: 22rpx;

	.title {
		height: 94rpx;
		line-height: 94rpx;
		font-size: 34rpx;
		font-weight: bold;
		padding-left: 32rpx;
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 108rpx;
		padding: 0 20rpx;
		border-bottom: 1rpx solid #EBEBEB;

		.twoLeft {
			font-size: 28rpx;

			image {
				width: 38rpx;
				height: 38rpx;
				margin-right: 17rpx;
				vertical-align: middle;
			}
		}
	}

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

代码简化

<view class="payList">
	<radio-group @change="radioChange">
		<label class="item" v-for="(item,index) in payList" :key="item.value">
			<view class="twoLeft">
				<image :src="$common.image(item.image)" mode="aspectFill">
				</image>
				<text>{{item.name}}</text>
				<text v-if="item.yueMoney" class="yueMoney">（￥{{item.yueMoney}}）</text>
			</view>
			<radio :value="item.value" :checked="payment_type == item.value" color="#60B347" style="transform:scale(0.7)" />
		</label>
	</radio-group>
</view>

// 支付方式
payList: [{
	value: 1,
	name: '余额',
	image: '/static/images/mall/yue.png',
	yueMoney:200
}, {
	value: 2,
	name: '支付宝',
	image: '/static/images/mall/zfb.png'
}, {
	value: 3,
	name: '微信',
	image: '/static/images/mall/weChat.png'
}],
payment_type: 1, //支付方式:1=余额,2=支付宝，3=微信



// 单选切换
radioChange(e) {
	console.log(e);
	this.payment_type = e.detail.value
},

单选

在这里插入图片描述

<view class="row">
	<view class="left">报警状态</view>
	<view class="right">
		<radio-group @change="onWarn">
			<label class="radio">
				<radio value="0" style="transform:scale(0.7)" :checked="smoke_alarm_status === '0'" />关闭
			</label>
			<label class="radio">
				<radio value="1" style="transform:scale(0.7)" :checked="smoke_alarm_status === '1'" />开启
			</label>
		</radio-group>
	</view>
</view>

<script>
	import common from '../../common/common.js'
	export default {
		data() {
			return {
				smoke_alarm_status: '1', // 烟雾报警状态
				device_id: '1304', //设备id
			}
		},
		onLoad(e) {
		},
		onShow() {
			this.getDeviceParamInfo() // 获取设备参数详情
		},
		methods: {
			// 报警
			onWarn(e) {
				console.log(e.detail.value);
				this.smoke_alarm_status = e.detail.value;
			},
			// 获取设备详情
			getDeviceParamInfo() {
				common.request('post', '/XXXXXXXXXX', {
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						const {
							smoke_alarm_status, // 报警状态
						} = res.data;
						this.smoke_alarm_status = smoke_alarm_status.toString(); // 报警状态
					}
				})
			}
		}
	}
</script>

.row {
	border-bottom: 1rpx solid #E7E7E7;
	padding: 30rpx 0;
	font-size: 30rpx;
	color: #4A4A4A;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.left {
		font-size: 30rpx;
		flex-shrink: 0;
	}

	input {
		text-align: right;
	}
}

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