uniapp中的单选实例（ radio）

template

<template>
	<view class="content">
		<view class="title">
			<text>Radio用法写法</text>
		</view>
		<view class="radioInfo">
			<view class="dataInfo">
				<!-- 列表内容开始 -->
				<radio-group @change="radioChange">
					<view class="dataList" v-for="(item,index) in dataList" :key='index'
						@click="listClick(item.titleId)" :class="index === radioCurrent?'radiOn':''">
						<view class="textImg">
							<view class="img">
								<image :src="item.imgUrl" mode="widthFix"></image>
							</view>
							<view class="text">
								<text>{{item.title}}</text>
								<text>{{item.url}}</text>
							</view>
						</view>
						<view class="radioBox">
							<radio color="#2DCF8C" :value="item.titleId + ''" :checked="index === radioCurrent" />
						</view>
					</view>
				</radio-group>
				<!-- 列表内容结束 -->
			</view>
		</view>
		
		<button @tap="getVal">获取</button>
	</view>
</template>

script

	export default {
		data() {
			return {
				dataList: [{
					imgUrl: 'https://www.miyil.com/static/icons/uniapp.png',
					title: 'UniApp',
					url: 'https://uniapp.dcloud.io/',
					titleId: 1
				}, {
					imgUrl: 'https://www.miyil.com/static/icons/github.png',
					title: 'GitHub',
					url: 'https://github.com/',
					titleId: 2
				}, {
					imgUrl: 'https://www.miyil.com/static/icons/vue.png',
					title: 'Vue',
					url: 'https://cn.vuejs.org/',
					titleId: 3
				}, {
					imgUrl: 'https://www.miyil.com/static/icons/react.png',
					title: 'React',
					url: 'https://react.docschina.org/',
					titleId: 4
				}],
				radioCurrent: null,
				dataFrom: {
					titleId: null //传的id
				}
			}
		},
		methods: {
			getVal(){ //获取选中的值
				
				console.log(this.dataFrom)
				
			},
			radioChange(evt) { //单个选择框点击
				
				this.dataFrom.titleId = parseInt(evt.detail.value) //如果需要通过点击来知道选择的是哪个商品的id
				console.log(this.dataFrom.titleId)
				for (let i = 0; i < this.dataList.length; i++) {
					if (this.dataList[i].titleId === evt.target.titleId) {
						this.radioCurrent = i;
						break;
					}
				}
			},
			/* 整块点击 */
			listClick(titleId) { //整个数据点击
				
				this.dataFrom.titleId = titleId //如果需要通过点击来知道选择的是哪个商品的id
				for (let i = 0; i < this.dataList.length; i++) {
					if (this.dataList[i].titleId == titleId) {
						this.radioCurrent = i;
						break;
					}
				}
			}
		}
	}

style

<style lang="scss">
	.content {
		.title {
			text-align: center;
			padding: 30rpx 0;
 
			text {
				color: #dedede;
				font-size: 55rpx;
				text-align: center;
				letter-spacing: 6rpx;
				text-shadow: 2rpx 2rpx 8rpx #000;
				opacity: .32;
			}
		}
 
		.radioInfo {
			.dataInfo {
				width: 90%;
				margin: 0 auto;
 
				.checkAll {
					display: flex;
					justify-content: space-between;
				}
 
				.radiOn {
					border: 1px solid #2DCF8C !important;
				}
 
				.dataList {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border: 1px solid #E7E9EE;
					padding: 20rpx;
					margin-bottom: 20rpx;
 
					.textImg {
						display: flex;
						align-items: center;
 
						.img {
							border: 1px solid #E7E9EE;
							padding: 10rpx;
 
							image {
								width: 90rpx;
								height: 90rpx;
								display: block;
							}
						}
 
						.text {
							padding-left: 20rpx;
 
							text {
								display: block;
								font-size: 30rpx;
								color: #000;
								font-weight: bold;
							}
						}
					}
				}
			}
		}
	}
</style>