小程序教程

微信小程序把玩(十九)radio组件

字号+ 作者: 来源: 2016-11-23 09:49 我要评论( )

radio组件为单选组件与radio-group组合使用,使用方式和checkbox没啥区别

主要属性:

wxml

  1. <!--设置监听器,当点击radio时调用-->
  2. <radio-group bindchange="listenerRadioGroup">
  3. <!--label通常与radio和checkbox结合使用-->
  4.     <label style="display: flex" wx:for-items="{{array}}">
  5.         <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
  6.     </label>
  7. </radio-group>
复制代码

js

  1. Page({
  2.   data:{
  3.     array:[
  4.         {name: 'Jave', value: 'Android', checked: 'true'},
  5.         {name: 'Object-C', value: 'IOS'},
  6.         {name: 'jsx', value: 'ReactNative'},
  7.         {name: 'js', value: 'WeChat'},
  8.         {name: 'Python', value: 'Web'},
  9.     ]
  10.   },
  11.   /**
  12.    * radio监听事件
  13.    */
  14.   listenerRadioGroup:function(e) {
  15.       console.log(e);
  16.   },
  17.   onLoad:function(options){
  18.     // 页面初始化 options为页面跳转所带来的参数
  19.   },
  20.   onReady:function(){
  21.     // 页面渲染完成
  22.   },
  23.   onShow:function(){
  24.     // 页面显示
  25.   },
  26.   onHide:function(){
  27.     // 页面隐藏
  28.   },
  29.   onUnload:function(){
  30.     // 页面关闭
  31.   }
  32. })
复制代码


 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 微信小程序 轮播图 swiper图片组件

    微信小程序 轮播图 swiper图片组件

    2016-11-23 09:49

  • 微信小程序 开发 微信开发者工具 快捷键

    微信小程序 开发 微信开发者工具 快捷键

    2016-11-23 09:49

  • 微信小程序 页面跳转 传递参数

    微信小程序 页面跳转 传递参数

    2016-11-23 09:49

  • 微信小程序 如何获取时间

    微信小程序 如何获取时间

    2016-11-23 09:49

网友点评