微信小程序 radio单选框组件详解及实例代码

2025-04-03 07:30:50

微信小程序单选框radio

相关文章：

微信小程序 Button

微信小程序 radio

微信小程序 slider

微信小程序 switch

微信小程序 textarea

微信小程序 picker-view

微信小程序 picker

微信小程序 label

微信小程序 input

微信小程序 form

微信小程序 checkbox

实现效果图：

radio-group

单选群组，内部由多个radio组成

属性名	类型	默认值	说明
bindchange	EventHandle		radio-group中的选中项发生变化时触发change事件，event.detai = {value : 选中项radio的value

radio

单选项目

属性名	类型	默认值	说明
value	String		radio标识。当该radio选中时，radio-group的change事件会携带radio的value
checked	Boolean	false	当前是否选中
disabled	Boolean	false	是否禁用

示例代码

<radio-group class="radio-group" bindchange="radioChange">
 <label class="radio" wx:for-items="{{items}}">
 <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
 </label>
</radio-group>

Page({
 data: {
 items: [
 {name: 'USA', value: '美国'},
 {name: 'CHN', value: '中国', checked: 'true'},
 {name: 'BRA', value: '巴西'},
 {name: 'JPN', value: '日本'},
 {name: 'ENG', value: '英国'},
 {name: 'TUR', value: '法国'},
 ]
 },
 radioChange: function(e) {
 console.log('radio发生change事件，携带value值为：', e.detail.value)
 }
})

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

详解微信小程序Radio选中样式切换

详解微信小程序Radio选中样式切换本篇文章主要讲解在微信小程序中如何根据Radio选中来切换样式.效果如下: 原理主要是通过判断一个radio-group中哪个被选中,就让它加上一个"active"的样式. 代码如下:  <view class="container"> <radio-group bindchange="radioCheckedChange"> <vi
微信小程序（十九）radio组件详细介绍

radio组件为单选组件与radio-group组合使用,使用方式和checkbox没啥区别主要属性: wxml  <radio-group bindchange="listenerRadioGroup">  <label style="display: flex" wx:for-items="{{a
微信小程序 radio单选框组件详解及实例代码

微信小程序单选框radio 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: radio-group 单选群组,内部由多个radio组成属性名类型默认值说明 bindchange EventHandle radio-g
微信小程序滚动选择器(时间日期)详解及实例代码

微信小程序滚动选择器(时间日期)详解微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器. 看下相应的属性: 具体的来看看代码,布局: <view class="section" > <
微信小程序滚动选择器(时间日期)详解及实例代码

微信小程序滚动选择器(时间日期)详解微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器. 看下相应的属性: 具体的来看看代码,布局: <view class="section" > <
微信小程序 modal弹框组件详解

微信小程序 modal: 这里对微信小程序中 modal组件进行详细解析,我想开发微信小程序的小伙伴可以用到,这里小编就记录下modal的知识要点. modal modal类似于javascript中的confirm弹框,默认情况下是一个带有确认取消的弹框,不过点击取消后弹框不会自动隐藏,需要通过触发事件调用函数来控制hidden属性. 官方文档 .wxml <modal hidden="{{hidden}}" title="这里是title" confir
微信小程序 modal弹框组件详解

微信小程序 modal: 这里对微信小程序中 modal组件进行详细解析,我想开发微信小程序的小伙伴可以用到,这里小编就记录下modal的知识要点. modal modal类似于javascript中的confirm弹框,默认情况下是一个带有确认取消的弹框,不过点击取消后弹框不会自动隐藏,需要通过触发事件调用函数来控制hidden属性. 官方文档 .wxml <modal hidden="{{hidden}}" title="这里是title" confir
微信小程序 MD5加密登录密码详解及实例代码

微信小程序 MD5加密在小程序中,页面的脚本逻辑是在JsCore中运行,JsCore是一个没有窗口对象的环境,所以不能在脚本中使用window,也无法在脚本中操作组件.zepto/jquery 也无法使用,因为zepto/jquery 会使用到window对象和document对象.所以在微信小程序中不能使用jquery.md5.js对密码进行加密.下面我提供一种MD5.js加密实例,本实例先静态演示,后面再到小程序中演示. md5.js程序如下: /* * A JavaScript impl
微信小程序左右滑动切换页面详解及实例代码

微信小程序--左右滑动切换页面事件微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X,Y坐标. touchstart在触摸开始时触发事件; touchend在触摸结束时触发事件; touchmove触摸的过程中不断激发这个事件; 这三个事件都有一个timeStamp的属性,查看timeStamp属性,可以看到顺序是touchstart => touchmove=> touchmov
微信小程序 wx.request(object) API详解及实例代码

这里通过干活集中营的API接口真实请求下数据.如果提示URL 域名不合法,请在 mp 后台配置后重试修改asdebug.js两行代码即可可看下面图定位到asdebug.js文件打开搜索关键字URL 域名不合法关键字就是提示错误信息注释两行代码主要方法: wxml <block wx:for-items="{{result}}"> <view style="width:100%; height: 50rpx"></view>
微信小程序网络请求wx.request详解及实例

微信小程序网络请求wx.request详解及实例如果说小程序API里面最重要一个接口是哪一个?那么首推wx.request().相当于在小程序内请发起一个https请求(本地调试模式下支持HTTP).HTTP协议中共定义了八种方法或者叫"动作"来表明对Request-URI指定的资源的不同操作方式. GET:向特定的资源发出请求. POST:向指定资源提交数据进行处理请求.数据被包含在请求体中. PUT:向指定资源位置上传其最新内容. DELETE:请求服务器删除Request-UR
微信小程序中的swiper组件详解

微信小程序中的swiper组件微信小程序中的swiper组件真的是简单方便提供了页面中图片文字等滑动的效果 <swiper> <swiper-item></swiper-item> <swiper-item></swiper-item> <swiper-item></swiper-item> </swiper> 这里的就是一个滑块视图容器:而就是你希望滑动的东西,可以是文字也可以是image 其中swipe

微信小程序 radio单选框组件详解及实例代码

相关推荐

随机推荐