uni-app中实现radio效果

矫情吗；* 2022-11-26 08:43 442阅读 0赞

笔者最近有个需求，选中当前按钮的时候还需要给其所在标签赋予样式，如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NzkyODQy_size_16_color_FFFFFF_t_70]  
最初的想法是使用uni-app中自带的[radio][]组件,确实很方便，H5页面一点问题都没有，但实际上只是笔者肉眼看不出来而已。接连在app，小程序端用真机测试，问题就出来了。。。  
选中radio后，样式会延迟几秒才能显示，这肯定是不行的。  
研究发现是因为笔者对官方文档提供的方法有一个误区，@change事件是在radio选中值变换以后才触发的，那我在这change事件里执行的任何操作那都是发生在click事件之后的，所以就有了先选中后样式的局面。  
由于没有多余的时间，取了个巧。直接使用图片切换的方式，用div来模拟radio。  
代码如下：

<template>
    	<view class="container">
    		<block v-for="(item,index) in list" :key="index">
    			<view class="box1">
    				<view class="box1-1">
    					<view class="box1-1-1">
    						课程：{ { item.courseName}}
    					</view>
    					<view class="box1-1-2">
    						得分：<text>{ { item.score}}</text>
    					</view>
    				</view>
    				<view class="box1-2">
    					<view class="box1-2-1">
    						教师：{ { item.skjs}}
    					</view>
    				</view>
    			</view>
    			<view class="box2">
    				<view class="box2-1" v-for="(tms,index1) in item.tmList" :key="tms.tmid">
    					<view class="box2-1-1">
    						{ { index1+1}}.{ { tms.tmmc}}<text>({ { tms.tmlx}})</text>
    					</view>
    					<view class="box2-1-2">
    						<block v-for="(xxs,idx3) in tms.xxList" :key="xxs.value">
    							<view class="uni-list-cell xz" v-if="tms.tmda==xxs.value" @click="radioChange(1,tms.tmid,item.courseId,xxs.value)">
    							    <view class="xz1"></view>
    							    <view>{ { xxs.name}}</view>
    							</view>
    							<view class="uni-list-cell" v-else @click="radioChange(0,tms.tmid,item.courseId,xxs.value)">
    							    <view class="wxz"></view>
    							    <view>{ { xxs.name}}</view>
    							</view>
    						</block>
    					</view>
    				</view>
    				<view class="box2-2"  @click="save()">
    					<view class="box2-2-1">提交</view>
    				</view>
    			</view>
    		</block>
    	</view>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { 
    				list:[{ 
    					courseId:1,
    					courseName:'装饰艺术设计',
    					score:0,
    					skjs:'张萌',
    					tmList: [
    						{ 
    							tmid:1,
    							tmmc:'教学准备充分、授课认真，能够结合课程特点进行教书育人。',
    							tmxh:1,
    							tmlx:'单选题',
    							tmda:'',
    							xxList:[{ 
    								name:'A.完全符合',
    								value: 1,
    								score: 20,
    							},
    							{ 
    								name:'B.符合',
    								value: 2,
    								score: 15,
    							},
    							{ 
    								name:'C.基本符合',
    								value: 3,
    								score: 10,
    							},
    							{ 
    								name:'D.基本不符合',
    								value: 4,
    								score: 5,
    							}]
    						},
    						{ 
    							tmid:2,
    							tmmc:'教学准备充分、授课认真，能够结合课程特点进行教书育人。',
    							tmxh:1,
    							tmlx:'单选题',
    							tmda:'',
    							xxList:[{ 
    								name:'A.完全符合',
    								value: 1,
    								score: 20,
    							},
    							{ 
    								name:'B.符合',
    								value: 2,
    								score: 15,
    							},
    							{ 
    								name:'C.基本符合',
    								value: 3,
    								score: 10,
    							},
    							{ 
    								name:'D.基本不符合',
    								value: 4,
    								score: 5,
    							}]
    						},
    						{ 
    							tmid:3,
    							tmmc:'教学准备充分、授课认真，能够结合课程特点进行教书育人。',
    							tmxh:1,
    							tmlx:'单选题',
    							tmda:'',
    							xxList:[{ 
    								name:'A.完全符合',
    								value: 1,
    								score: 20,
    							},
    							{ 
    								name:'B.符合',
    								value: 2,
    								score: 15,
    							},
    							{ 
    								name:'C.基本符合',
    								value: 3,
    								score: 10,
    							},
    							{ 
    								name:'D.基本不符合',
    								value: 4,
    								score: 5,
    							}]
    						},
    						{ 
    							tmid:4,
    							tmmc:'教学准备充分、授课认真，能够结合课程特点进行教书育人。',
    							tmxh:1,
    							tmlx:'单选题',
    							tmda:'',
    							xxList:[{ 
    								name:'A.完全符合',
    								value: 1,
    								score: 20,
    							},
    							{ 
    								name:'B.符合',
    								value: 2,
    								score: 15,
    							},
    							{ 
    								name:'C.基本符合',
    								value: 3,
    								score: 10,
    							},
    							{ 
    								name:'D.基本不符合',
    								value: 4,
    								score: 5,
    							}]
    						},
    						{ 
    							tmid:5,
    							tmmc:'教学准备充分、授课认真，能够结合课程特点进行教书育人。',
    							tmxh:1,
    							tmlx:'单选题',
    							tmda:'',
    							xxList:[{ 
    								name:'A.完全符合',
    								value: 1,
    								score: 20,
    							},
    							{ 
    								name:'B.符合',
    								value: 2,
    								score: 15,
    							},
    							{ 
    								name:'C.基本符合',
    								value: 3,
    								score: 10,
    							},
    							{ 
    								name:'D.基本不符合',
    								value: 4,
    								score: 5,
    							}]
    						}
    					]
    				}]
    			};
    		},
    		onLoad:function(){ 
    			
    		},
    		methods: { 	
    			radioChange(ee,tmId,courseId,value){ 				
    				if(ee==1){ 
    					return;
    				}
    				let score=0;
    				for(let i=0;this.list!=null && i<this.list.length;i++){ 
    					if(this.list[i].courseId==courseId){ 
    						for(let j=0;this.list[i].tmList!=null && j<this.list[i].tmList.length;j++){ 
    							if(this.list[i].tmList[j].tmid==tmId){ 
    								this.list[i].tmList[j].tmda=value;
    							}
    							let da=this.list[i].tmList[j].tmda;
    							for(let k=0;this.list[i].tmList[j].xxList!=null && k<this.list[i].tmList[j].xxList.length;k++){ 
    								if(this.list[i].tmList[j].xxList[k].value==da){ 
    									score+=this.list[i].tmList[j].xxList[k].score;
    								}
    							}
    						}
    						this.list[i].score=score;
    						break;
    					}
    				}
    			},
    			save(){ 
    				uni.showModal({ 
    					title: '提示',
    					content: '评教任务已成功提交~',
    					showCancel: false,
    					confirmText: '知道了',
    					success:function(res){ 
    						if(res.confirm){ 
    							
    						}
    					}
    				})
    			}
    			
    		}
    	};
    </script>
    
    <style lang="scss">
    page { 
    	background: #f2f2f2;
    }	
    .container{ 
    	.box1{ 
    		background: #fff;
    		.box1-1{ 
    			display: flex;
    			justify-content: space-between;
    			padding: 30rpx;
    			font-size:34rpx;
    			font-family:Microsoft YaHei;
    			font-weight:400;
    			color:rgba(51,51,51,1);
    			line-height:40rpx;
    			.box1-1-1{ 
    				color:rgba(51,51,51,1);
    			}
    			.box1-1-2{ 
    				color:rgba(136,136,136,1);
    				text{ 
    					color: rgba(0, 171, 161, 1);
    				}
    			}
    			border-bottom: 2rpx solid rgba(244,244,244,1);
    		}
    		.box1-2{ 
    			font-size:28rpx;
    			font-family:Microsoft YaHei;
    			font-weight:400;
    			color:rgba(136,136,136,1);
    			line-height:40rpx;
    			.box1-2-1{ 
    				padding: 30rpx;
    			}
    		}
    	}
    	.box2{ 
    		background: #fff;
    		margin-top: 24rpx;
    		.box2-1{ 
    			padding: 26rpx 32rpx;
    			border-bottom: 2rpx solid rgba(244,244,244,1);
    			.box2-1-1{ 
    				font-size:34rpx;
    				font-family:PingFang;
    				font-weight:500;
    				color:rgba(51,51,51,1);
    				line-height:52rpx;
    				text{ 
    					color: rgba(136, 136, 136, 1);
    				}
    			}
    			.box2-1-2{ 
    				.uni-list-cell{ 
    					display: flex;
    					margin-top: 30rpx;
    					padding: 10rpx;
    					view:nth-child(1){ 
    						width: 32rpx;
    						height: 32rpx;
    						content: '';
    						margin-top: 12rpx;
    					}
    					.wxz{ 
    						background: url(../../../static/student/pj/ellipse1.png);
    						background-size: 100% 100%;
    					}
    					.xz1{ 
    						background: url(../../../static/student/pj/ellipse2.png);
    						background-size: 100% 100%;
    					}
    					view:nth-child(2){ 
    						font-size: 28rpx;
    						margin: 4rpx 0rpx 0rpx 16rpx;
    						line-height: 50rpx;
    					}
    					border:1px solid rgba(244,244,244,1);
    				}
    				.xz{ 
    					background:rgba(0,171,161,0.2);
    					border:1px solid rgba(0,171,161,1);
    				}
    			}
    		}
    		.box2-2{ 
    			width:690rpx;
    			background:rgba(0,171,161,1);
    			border-radius:10rpx;
    			margin: 160rpx 0rpx 60rpx 30rpx;
    			.box2-2-1{ 
    				margin-left: 310rpx;
    				font-size: 36rpx;
    				padding: 30rpx 0rpx;
    				color:rgba(255,255,255,1);
    
    			}
    		}
    	}
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NzkyODQy_size_16_color_FFFFFF_t_70]: /images/20221124/b087bad935bd40af859d37fe0becddf9.png
[radio]: https://uniapp.dcloud.net.cn/component/radio