微信小程序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 相关文章推荐
Javascript实现的分页函数
Dec 22 Javascript
几个javascript操作word的参考代码
Oct 26 Javascript
js 数组克隆方法 小结
Mar 20 Javascript
js对象内部访问this修饰的成员函数示例
Apr 27 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
关于Function中的bind()示例详解
Dec 02 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 Javascript
vuex与组件联合使用的方法
May 10 Javascript
vue mounted组件的使用
Jun 18 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 Javascript
微信小程序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” 彩蛋进行敏感信息获取
2013/08/07 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
使用AngularJS来实现HTML页面嵌套的方法
2015/06/17 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
Python魔法方法功能与用法简介
2019/04/04 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
python tkinter基本属性详解
2019/09/16 Python
python绘制彩虹图
2019/12/16 Python
python 深度学习中的4种激活函数
2020/09/18 Python
Python 使用office365邮箱的示例
2020/10/29 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
营销主管自我评价怎么写
2013/09/19 职场文书
应聘美工求职信
2013/11/07 职场文书
安全生产标语
2014/06/06 职场文书
美化环境标语
2014/06/20 职场文书
答谢词范文
2015/01/05 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
督导岗位职责范本
2015/04/10 职场文书
催款函范文
2015/06/24 职场文书
新闻通讯稿模板
2015/07/22 职场文书
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL