uni单选radio

案例演示

代码

<radio-group @change="radioChange">
	
	<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>
	
radio-group>

1
2
3
4
5
6
7
8
9
10
11

案例演示

代码：

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// 支付方式
.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;
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

代码简化

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13

// 支付方式
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
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

网址

https://uniapp.dcloud.net.cn/component/radio.html