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

 更新时间:2017年01月10日 15:23:09   投稿:lqh  
这篇文章主要介绍了微信小程序 radio单选框组件详解及实例代码的相关资料,需要的朋友可以参考下

微信小程序单选框radio

 相关文章:

微信小程序 Button

微信小程序 radio

微信小程序 slider

微信小程序 switch

微信小程序 textarea

微信小程序 picker-view

微信小程序 picker

微信小程序 label

微信小程序 input 

微信小程序 form

微信小程序 checkbox

实现效果图:

radio

 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)
 }
})
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • 微信小程序 侧滑删除(左滑删除)

    微信小程序 侧滑删除(左滑删除)

    这篇文章主要介绍了微信小程序 侧滑删除(左滑删除)的相关资料,需要的朋友可以参考下
    2017-05-05
  • 前端算法题解 leetcode50-Pow(x, n)

    前端算法题解 leetcode50-Pow(x, n)

    这篇文章主要为大家介绍了前端算法题解 leetcode50-Pow(x, n)示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 为什么我们要做三份 Webpack 配置文件

    为什么我们要做三份 Webpack 配置文件

    前端从开发到部署前都离不开 Webpack 的参与,本文结合了我们自己在开发中碰到的种种问题解决方案,同时借鉴了很多开源项目的配置来介绍一种用 3 个 JS 文件来配置 Webpack 的方法。
    2017-09-09
  • JavaScript文档对象模型DOM

    JavaScript文档对象模型DOM

    这篇文章主要介绍了JavaScript文档对象模型DOM,当网页被加载时,浏览器会创建页面的文档对象模型,通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。下面来看看文章得详细内容,需要的朋友可以参考一下
    2021-11-11
  • 使用 JS 复制页面内容的三种方案

    使用 JS 复制页面内容的三种方案

    这篇文章主要为大家介绍了使用 JS 复制页面内容的三种方案详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 微信小程序 开发之滑块视图容器(swiper)详解及实例代码

    微信小程序 开发之滑块视图容器(swiper)详解及实例代码

    这篇文章主要介绍了微信小程序 开发之滑块视图容器(swiper)详解及实例代码的相关资料,需要的朋友可以参考下
    2017-02-02
  • 微信小程序 scroll-view组件实现列表页实例代码

    微信小程序 scroll-view组件实现列表页实例代码

    这篇文章主要介绍了微信小程序 scroll-view组件实现列表页实例代码的相关资料,scroll-view组件介绍scroll-view是微信小程序提供的可滚动视图组件,其主要作用是可以用来做手机端经常会看到的上拉加载 ,需要的朋友可以参考下
    2016-12-12
  • JS前端轻量fabric.js系列物体基类

    JS前端轻量fabric.js系列物体基类

    这篇文章主要为大家介绍了实现JS前端轻量fabric.js系列物体基类示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 总结JavaScript中BigIn函数常见的属性

    总结JavaScript中BigIn函数常见的属性

    本文基于JavaScript基础,介绍了 BigInt 函数,常见的属性,通过 BigInt 函数进行数字运算符的比较。布尔运算等等,通过按案例的分析进行详细的讲解,需要的朋友可以参考一下
    2021-10-10
  • 前端对接WebSocket与心跳重连实现

    前端对接WebSocket与心跳重连实现

    这篇文章主要为大家介绍了前端对接WebSocket与心跳重连实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07

最新评论