微信小程序radio组件使用详解


Posted in Javascript onJanuary 31, 2018

本文为大家分享了微信小程序radio组件的使用方法,供大家参考,具体内容如下

效果图

微信小程序radio组件使用详解

WXML

<view class="tui-content">
 <radio-group class="radio-group" bindchange="radioChange">
  <label class="radio" wx:for="{{items}}">
   <view class="tui-menu-list"><radio color="#007aff" value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}</view>
  </label>
 </radio-group>
 <view class="tui-show-name">
  {{radioStr}}
 </view>
</view>

JS

Page({
 data: {
  items: [
   { name: 'USA', value: '美国' },
   { name: 'CHN', value: '中国', checked: 'true' },
   { name: 'BRA', value: '巴西' },
   { name: 'JPN', value: '日本' },
   { name: 'ENG', value: '英国' },
   { name: 'TUR', value: '法国' },
  ],
  radioStr: '中国'
 },
 radioChange: function (e) {
  var str = null;
  for (var value of this.data.items) {
   if (value.name === e.detail.value) {
    str = value.value;
    break;
   }
  }
  this.setData({ radioStr: str });
 }
})

总结

由于e.detail.value是一个字符串,所以直接采用for…of…对比就可以确定点击目标。

DEMO下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
MSN消息提示类
Sep 05 Javascript
js 多浏览器分别判断代码
Apr 01 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
vue判断按钮是否可以点击
Apr 09 Vue.js
微信小程序checkbox组件使用详解
Jan 31 #Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 #Javascript
浅析Angular19 自定义表单控件
Jan 31 #Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 #Javascript
微信小程序switch开关选择器使用详解
Jan 31 #Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 #Javascript
微信小程序slider组件使用详解
Jan 31 #Javascript
You might like
php中通过smtp发邮件的类,测试通过
2007/01/22 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
javascript脚本调试方法小结
2008/11/24 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
JS实现遍历不规则多维数组的方法
2018/03/21 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
使用python实现个性化词云的方法
2017/06/16 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
自荐书4要点
2014/01/25 职场文书
财务内勤岗位职责
2014/04/17 职场文书
公司建议书怎么写
2014/05/15 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP