脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序radio组件使用

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

 更新时间：2018年01月31日 14:14:49   作者：Rattenking  
这篇文章主要为大家详细介绍了微信小程序radio组件的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文为大家分享了微信小程序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实现京东快递单号的查询效果

    这篇文章主要为大家详细介绍了javascript实现京东快递单号的查询效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • 简单谈谈axios中的get,post方法

    简单谈谈axios中的get,post方法

    下面小编就为大家带来一篇简单谈谈axios中的get,post方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 微信小程序静默登录和维护自定义登录态详解

    微信小程序静默登录和维护自定义登录态详解

    这篇文章主要给大家介绍了关于微信小程序静默登录和维护自定义登录态的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • Javascript实现代码折叠功能

    Javascript实现代码折叠功能

    代码折叠起来,使整段程序缩成一行,看起来清爽了许多。大家在使用Visual Studio环境进行开发时，可以把某个类或某个函数折叠起来，在很多网页上也有类似的功能，那到底是如何实现的呢？其实很简单，只要通过JavaScript就可以实现。
    2016-08-08
  • uniapp中全局页面挂载组件实战过程(小程序)

    uniapp中全局页面挂载组件实战过程(小程序)

    这篇文章主要给大家介绍了关于uniapp中全局页面挂载组件(小程序)的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用uniapp具有一定的参考学习价值,需要的朋友可以参考下
    2022-12-12
  • 第六章之辅组类与响应式工具

    第六章之辅组类与响应式工具

    Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。本文给大家介绍BootStrap组件之辅组类与响应式工具，感兴趣的朋友一起学习吧
    2016-04-04
  • Javascript中如何循环(常用方法推荐)

    Javascript中如何循环(常用方法推荐)

    在JavaScript中,遍历集合（如数组、对象、Map和Set等）有多种方式,下面给大家分享几种常用的方法来讲解Javascript中如何循环,感兴趣的朋友一起看看吧
    2025-04-04
  • 简单聊聊TypeScript只读修饰符

    简单聊聊TypeScript只读修饰符

    有的时候我们希望对类成员(属性,方法)进行一定的访问控制,来保证数据的安全,通过类修饰符可以做到这一点,目前typescript提供了四种修饰符,这篇文章主要给大家介绍了关于TypeScript只读修饰符的相关资料,需要的朋友可以参考下
    2022-04-04
  • JavaScript中无法通过div.style.left获取值的解决方法

    JavaScript中无法通过div.style.left获取值的解决方法

    这篇文章主要介绍了JavaScript中无法通过div.style.left获取值的问题分析及解决方法,需要的朋友可以参考下
    2017-02-02
  • 前端CryptoJS加密、后端JAVA解密代码实现参考

    前端CryptoJS加密、后端JAVA解密代码实现参考

    这篇文章主要介绍了前端CryptoJS加密、后端JAVA解密代码实现参考,需要的朋友可以参考下
    2023-12-12

最新评论