精华内容
下载资源
问答
  • uniapp单选框radio 使用和样式

    千次阅读 2021-07-28 15:34:39
    选项框代码: <template> <view> ...radio-group @change="chan"> <label> <radio :value="'0'" checked="checked" />确认 <radio :value="'1'" />拒绝...

    选项框代码:

    <template>

    <view>

    <radio-group @change="chan">
                            <label>
                                <radio  :value="'0'"  checked="checked" />确认
                                <radio :value="'1'"  />拒绝
                            </label>
                        </radio-group>

    </view>

    </template>


    <script>

            data() {
                return {
                  

                }
            },
            methods: {     

                chan(e) {
                    this.activeRadio = e.detail.value;

                    //this.activeRadio存的是选中的Value的值
                    console.log(this.activeRadio);
                }
        }
    </script>

    checked="checked"是默认选中

    下面是最难修改的radio选中跟未选中的样式

      确认是选中状态,拒绝是未选中状态

    样式代码:

      /* radio 选中后的样式 */
                uni-radio .uni-radio-input.uni-radio-input-checked{
                    background-color: #FFCC33!important;
                    border-color: #FFCC33!important;
                    background-clip: content-box!important;
                    padding: 7rpx!important;
                    box-sizing: border-box;
                }

    注意:样式一定要写在APP.vue里面,不然的话不管用

    展开全文
  • uniapp中如获取radio的value值

    千次阅读 2020-02-26 17:30:17
    uniapp官网关于radio-group的介绍 @change 监听 radio-group 变化,当 radio-group 发生改变时触发的方法,当用户点击按钮时触发的方法。 checkOne(e) 方法名随便起,传入参数 e (e为对象), 在控制台打印 e 发现...

    uniapp官网关于radio-group的介绍
    在这里插入图片描述
    @change 监听 radio-group 变化,当 radio-group 发生改变时触发的方法,当用户点击按钮时触发的方法。
    checkOne(e) 方法名随便起,传入参数 e (e为对象), 在控制台打印 e

    在这里插入图片描述
    发现,detail 下面有一个 value 值为 'apple'
    因此我们打印 e.detail.value 即可得到当前用户所点击的按钮的value值

    展开全文
  • 新手刚入门uniapp,在昨天遇到了一个小问题:在

    新手刚入门uniapp,在昨天遇到了一个小问题:在radiogroup里写的三个radio居然可以同时都选住,checked都设为false了。
    话不多说,先上代码:

    <!-- #ifdef MP-WEIXIN -->
    			<view>
    				<view>
    					<radio-group class="radiolist" @change="wxradioChange" v-for="(item,index) in wxradiodata" :key="index">
    						<radio :value="item.id" :ischecked="item.isChecked" color="#ff5500">
    							<view class="imageAndText">
    								<image :src="item.img" mode="aspectFill" class="payPicture"></image>
    								<text class="wxText">{{item.text}}</text>
    							</view>
    						</radio>
    					</radio-group>
    				</view>
    				
    				<view>
    					<button type="default" size="mini" class="quxiao" @click="cancelbutton">取消</button>
    					<button type="warn" size="mini" class="queding" @click="wxconfirmbutton">确定</button>
    				</view>
    			</view>
    <!-- #endif -->
    
    <!-- #ifdef APP-PLUS||H5 -->
    			<view>
    				<radio-group class="radiolist" @change='radioChange' v-for="(item,index) in radiodata" :key="index">
    					<!-- 遍历data实现radio -->
    						<radio :value="item.id" color="#ff5500" :checked="item.isChecked" :style="item.radio">
    							<view class="imageAndText">
    								<image :src="item.img" mode="aspectFill" class="payPicture" :style="item.yinlianpayPicture"></image>
    								<label class="label" :style="item.yinlianlabel">{{item.text}}</label>
    							</view>
    						</radio>
    				</radio-group>
    				
    				<view>
    					<button type="default" size="mini" class="quxiao" @click="cancelbutton">取消</button> 
    					<button type="warn" size="mini" class="queding" @click="confirmbutton">确定</button>
    				</view>
    			</view>
    <!-- #endif -->
    
    export default {
    		data(){
    			return {
    				radiodata:[
    					{
    						id:'zhifubao',
    						text:'支付宝',
    						isChecked:false,
    						img:'../../static/imgs/pay_zhifubao.png'
    					},
    					{
    						id:'wechat',
    						text:'微信',
    						isChecked:false,
    						img:'../../static/imgs/pay_weixin.png',
    						radio:'margin-top: 20upx;'
    					},
    					{
    						id:'yinlian',
    						text:'银联',
    						isChecked:false,
    						img:'../../static/imgs/pay_yinlian.png',
    						radio:'margin-top: 20upx;',
    						yinlianpayPicture:'width: 70upx; height: 50upx; left:15upx;',
    						yinlianlabel:'margin-left: 35upx;line-height: 2em;'
    					}
    				],
    				wxradiodata:[
    					{
    						id:1,
    						text:'微信',
    						isChecked:false,
    						img:'../../static/imgs/pay_weixin.png'
    					}
    				],
    				current: 0
    			}
    		}
    

    我是把小程序和app的代码分离开来写,然后运行的时候,微信小程序一切正常,但是app端的radio可以三个都选,没有实现单选的功能,检查了一下我的checked都设为了false,而且控制台没有报错,于是一脸懵逼的我去官方认真查看了一下这个组件的介绍,并把官方的代码复制到编译器里面发现可以实现单选的功能,官方是这么写的:
    在这里插入图片描述
    在这里插入图片描述
    然后,我去仔细地审查我自己的代码,发现微信小程序的代码可以运行成功完全是一个巧合,因为那个radiogroup里只有一个radio按钮(因为小程序里支付的时候只能选择微信支付),我在通过遍历data里面数据给radio赋值的时候犯了一个错误:
    代码在这里:

    <radio-group class="radiolist" @change='radioChange' v-for="(item,index) in radiodata" :key="index">
    

    其实不能把遍历的那一段代码写在radio group或者radio里,应该在radio或者radio group外面再套一个label或者是view来进行这个遍历操作去拿数据。
    修改后是这样的(看第五行):

    <!-- #ifdef APP-PLUS||H5 -->
    			<view>
    				<radio-group class="radiolist" @change='radioChange'>
    					<!-- 遍历data实现radio -->
    					<view v-for="(item,index) in radiodata" :key="index">
    						<radio :value="item.id" color="#ff5500" :checked="item.isChecked" :style="item.radio">
    							<view class="imageAndText">
    								<image :src="item.img" mode="aspectFill" class="payPicture" :style="item.yinlianpayPicture"></image>
    								<label class="label" :style="item.yinlianlabel">{{item.text}}</label>
    							</view>
    						</radio>
    					</view>
    				</radio-group>
    			</view>
    			<!-- #endif -->
    

    于是,这样就可以成功地运行了(效果图):
    在这里插入图片描述
    如果你遇到了和我相同的问题,希望可以帮助到你!

    uniapp官方文档地址

    展开全文
  • uni-app中实现radio效果

    千次阅读 2020-08-11 14:50:31
    最初的想法是使用uni-app中自带的radio组件,确实很方便,H5页面一点问题都没有,但实际上只是笔者肉眼看不出来而已。接连在app,小程序端用真机测试,问题就出来了。。。 选中radio后,样式会延迟几秒才能显示,这...

    笔者最近有个需求,选中当前按钮的时候还需要给其所在标签赋予样式,如图:
    在这里插入图片描述
    最初的想法是使用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>
    
    展开全文
  • uniapp—修改radio组件的大小

    千次阅读 2020-04-20 08:32:43
    radio组件的样式大小太大了,和我的文字大小不匹配,看起来很难看 于是给radio设置了width和 height ,然而并不起作用 最后是使用transform:scale(0.7);完美解决问题 ...
  • uniapp改变radio大小

    2021-03-01 13:47:34
    半年前使用uniapp+ColorUI+安卓写了一款app,最近在进行一些优化和修改,顺便记录一下遇到的一些小问题,遇到的一些可以记录下来的优化点,其实uniapp用来做一些比较简单...在默认的radio选择框里面 我这里男生和女生
  • radio-groupsd 单项选择器,内部由多个<radio>组成。通过把多个radio包裹在一个radio-group下,实现这些radio的单选。 属性说明 属性名 类型 默认值 说明 @change EventHandle <...
  • uniapp中修改radio的样式

    千次阅读 2020-05-14 09:23:06
    uniapp中修改radio的样式 解决方法 在App.vue文件中写样式(只能在App.vue中写,否则就没有效果) uni-radio .uni-radio-input { width: 44upx; height: 44upx; }
  • uniappradio颜色渐变

    2020-10-19 17:20:57
    在css中添加如下代码,即可实现选中状态渐变 .uni-radio-input-checked{ background: linear-gradient(142deg,#FF9200 0%,#FF2B2B 100%); }
  • radio 原来的样式: radio 现在的效果: <template> <label class="radio"> <radio value="" /> </label> </template> 修改 radio 的样式要在 App.vue 中修改 /* ...
  • uniapp radio组件取消选中

    千次阅读 2020-12-19 15:27:05
    radio-group> <label v-for="(item, index) in List" :key="index"> <radio :class="active == index ? 'checked' : ''" :checked="active== index" :value="index" @click="radioChange(index)"/>...
  • 今天发现了一个新大陆,因为今天的任务...后来我进去官网搜了一下发现uinapp的input是没有radio 类型的,uniapp的单选框有radio 标签还有radio-group单选按钮组,详见如下:官方文档 单项选择器,内部由多个 组成。通过
  • radio-group @change="radioChange" style="margin-left: 40rpx;"> <radio style="margin-right: 40rpx;" value="1" :checked="radioValue==1" >生产</radio> <radio style="margin-right: ...
  • uniapp中,radio的单选样式的打勾样式,并且input组件不能使用type="radio"类型,这样并不能满足日常的radio需求 需要实现实心圆的radio单选,只能根据原生样式进行设计,下面使用vue.js举例 <view> ...
  • uniapp列表中使用单选组件radio的时候,很多人会通过给列表中的每个item添加checked的true和false去控制radio的checked属性
  • uniappradio样式改变

    2021-12-06 15:29:57
    uniappradio样式改变
  • console.log(index) if (index=='') { ta.current=null //默认radio 未选择 }else{ ta.current = index console.log(ta.reasons[index].reason) ta.fz_dx = ta.reasons[index].reason ...
  • .jinyong .uni-radio-input-checked:before{ color: #adadad!important; } .jinyong .uni-radio-input{ background-color: #e1e1e1!important; border-color: #e1e1e1!important; } vue文件在radio标签里加上 :class...
  • 半年前使用uniapp+ColorUI+安卓写了一款app,最近在进行一些优化和修改,顺便记录一下遇到的一些小问题,遇到的一些可以记录下来的优化点,其实uniapp用来做一些比较简单的app还是挺不错的,比较快捷,容易管理~~ ...
  • uni 单选框css问题

    2019-12-23 16:01:07
    radio-group @change="gaibianxz"> <view class=" top"> <radio value="10" class="qianleft" :style="'border: 1px solid '+yanse[0].color+';'"><view class="...
  • uniapp uview radio组件取消选中

    千次阅读 2021-03-22 10:48:25
    一、打开 /node_modules/uview-ui/components/u-radio/u-radio.vue 文件 二、找到 setRadioCheckedStatus() 函数 三、函数修改为 setRadioCheckedStatus() { this.emitEvent(); if(this.parent) { if (this....
  • uni-app中修改radio样式大小

    千次阅读 2021-01-19 14:46:26
    <radio style="transform: scale(0.5); color: #2295FF;" value="1"></radio> 使用transform: scale(0.5)进行缩放
  • 微信小程序 .wx-checkbox-input-checked, .wx-radio-input-checked, .wx-switch-input-checked { background-color: #0099ff !...uniapp .uni-checkbox-input-checked, .uni-radio-input-checked, .uni
  • uniapp 中,做一个答题小程序的时候,用到了radio 控件,然后使用radio-group 进行对其的具体使用,在uni提供的方法中,我采取了动态切换选项的方式,但是在选择第一题后,第二题自己保留了上一次的选择,在查找了...
  • 本篇以uniapp项目为例 开始之前要先排除uniapp官网的这种写法 { value: 'CHN', name: '中国', checked: 'true' }, 不要以里面checked的取值来判断是否应该...
  • uniapp中,radio在一个for循环中,当点击选项时,ischecked变为true,再次点击时ischecked变为false,这时,如果第二次点击的是选择圆圈没有问题,如果点击文字,ischecked也变为false,但是这个时候还是显示选中...
  • 以Colorui-Uniapp表单页面修改例子!在标签使用transform:scale(0.7);即可完美解决问题 ! css3的transform中scale缩放的使用方法 从3个方面介绍: 1、scale(x,y) 对元素进行缩放 X表示水平方向缩放的倍数 | Y...
  • radio-group @change="checkOne"> <radio @click="toShow" value="A" >A. {<!-- -->{i.a_content}}</radio></br> <radio @...
  • <label><checkbox value="cb" checked="true" color="#FFCC33" style="transform:scale(0.7)" />选中 </label> 直接在标签内加上相应的属性就行了。 color:是选中时对勾的颜色;...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 484
精华内容 193
关键字:

radiouniapp