uniapp中单选按钮的实现
标签说明:
radio-group:单项选择器,内部由多个 <radio>
组成。通过把多个radio
包裹在一个radio-group
下,实现这些radio
的单选。
radio:单选项目
属性说明:
@change:<radio-group>
标签中的radio选中项发生变化时触发 change 事件,event.detail = {value: 选中项radio的value}
value:<radio>
标识。当该 <radio>
选中时,<radio-group>
的 change 事件会携带 <radio>
的 value
checked:当前是否选中,默认值false,类型是布尔值
disabled:是否禁用,默认值是false,类型是布尔值
color:radio的颜色,同css的color
注意
- radio的默认颜色,在不同平台不一样。微信小程序是绿色的,字节跳动小程序为红色,其他平台是蓝色的。更改颜色使用color属性。
- 如需调节radio大小,可通过css的scale方法调节,如缩小到70%
style="transform:scale(0.7)"
- radio不是checkbox,点击一个已经选中的radio,不会将其取消选中
上代码:
<!-- uniapp单选框 --><view class=""><radio-group @change="chang"><label v-for="item in radioGroup" :key="item"><radio :value="item" :checked="item==activeRadio" />{{item}}</label></radio-group></view><script>export default {data() {return {// 单选框数据activeRadio: '', //存的是单选按钮选中的value值radioGroup: ['苹果', '香蕉', '梨', '西红柿', '西瓜']}},methods: {// 单选按钮发生改变时触发的方法chang(e) {this.activeRadio = e.detail.value; //选中按钮的value值console.log(this.activeRadio);}
}
</script>
打印结果:
1.获取选中按钮的value值,e.detail.value,赋值给data中activeRadio声明的变量
2.打印选中按钮的值
实际场景案例,男女单选框
<radio-group @change="radioChange" class="value checked" style="font-size: 13px;"><label class="radio"><radio style="zoom: 0.8;" :color="roleColor" value="1" :checked="sex == '1'" />男</label><label class="radio" style="margin-left: 15%;"><radio style="zoom: 0.8;" :color="roleColor" value="2" :checked="sex == '2'" />女</label>
</radio-group><script>export default {data() {return {// 单选框数据sex: "", //存的是单选按钮选中的value值,性别值}},methods: {radioChange(evt) {// console.log(evt);this.sex = evt.detail.value;},
}</script>
效果图:
uniapp中单选按钮的实现相关推荐
- uniapp中使用微信jssdk
在做自定义分享时,用到了微信jssdk,记录一下. 声明:本文演示uniapp中使用jssdk,示例为网页自定义分享 npm方式使用下方指令进行安装,正文部分为非npm方式. npm install ...
- uni-app中使用腾讯位置服务实现小程序地图选点功能
文章目录 1. 官方文档 2. 小程序添加插件 3. HBuilder配置 4. 配置代码 5. 页面代码 1. 官方文档 技术选定(地图选点插件) (对应官网:https://lbs.qq.com/ ...
- 项目安装使用uuid_在uniapp中使用fingerprint2实现游客设备标识
前言: 这里的fingerprint不是uni-app的指纹模块,是一个使用javascript开发的设备指纹采集器,通过这个库可以定位正在使用的浏览器具备的特征唯一标识.如系统字体.屏幕分辨率.浏览 ...
- uni-app中的数据绑定
uni-app中的数据绑定 在页面中需要定义数据,和我们之前的vue一模一样,直接在data中定义数据即可 export default {data () {return {msg: 'hello-u ...
- uni-app中的样式
uni-app中的样式 rpx 即响应式px,一种根据屏幕宽度自适应的动态单位.以750宽的屏幕为基准,750rpx恰好为屏幕宽度.屏幕变宽,rpx 实际显示效果会等比放大. 使用@import语句可 ...
- jQuery Mobile中单选按钮radio的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中单选按钮radio的data-*选项 带有 type="radio" ...
- ajax 导致 css 延迟_在H5,小程序,uni-app中使用animate.css
动画过渡效果对于程序的重要性是毋容置疑的,过渡动画的流畅真的能给人一种程序很顺畅的感觉.ios系统基本上不管是什么操作都喜欢运用动画过渡,所以给人一种超流畅的感觉!在项目中我们也会经常被要求在元素切换 ...
- uni-app中v-html中的元素添加样式
我在uni-app中使用的是scss 所以我的解决方式是: 使用 /deep/ 进行修改 /deep/.wscnph { width:100%; } 目前可以解决,你们遇到的话可以试一下
- uniapp中制作战力计算器
uniapp中制作战力计算器 <template><view class="calculate-wrap"><!-- 计时器-start --> ...
最新文章
- 从Hive导出数据到Oracle数据库--Sqoop
- 图像分割2020总结:结构,损失函数,数据集和框架
- 【UWP】拖拽列表项的排序功能实现
- P5268-[SNOI2017]一个简单的询问【莫队】
- Opencv——基于索引表的图像细化
- 【 全干货 】5 分钟带你看懂 Docker ! 1
- acm国际大学上计算机竞赛,ACM国际大学生程序设计竞赛
- Android Camera (13)---MTK平台相机插值修改
- 比尔盖茨夫妇宣布离婚 结束27年婚姻
- matlab anova 如何不画图,方差分析的数据处理和作图
- 小程序商店刷榜_微信小程序店铺如何做引流,带来转化?
- 总结全网最全的数据学习平台
- 叔叔不约---匿名聊天网 聊天图片爬虫抓取
- js中的DOM事件之冒泡和捕获事件详解
- Android 后台开发
- XML 中的 ﹤![CDATA[ ]]
- 【微信小程序】---- redux 在原生微信小程序的使用实例
- 沁云图提供大量最新市场火爆的虚拟产品
- okl4 linux,数据接入 API
- 使用bat脚本调用bandzip批量解压同密码的zip压缩包