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

2025-11-06 14:56:25

本文为大家分享了微信小程序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>

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下载

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

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

微信小程序单选框radio 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: radio-group 单选群组,内部由多个radio组成属性名类型默认值说明 bindchange EventHandle radio-g
微信小程序使用radio显示单选项功能【附源码下载】

本文实例讲述了微信小程序使用radio显示单选项功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <radio-group bindchange="radiogroupBindchange"> <radio value="radio1">radio1</radio> <radio value="radio2">radio2</radio> &l
详解微信小程序Radio选中样式切换

详解微信小程序Radio选中样式切换本篇文章主要讲解在微信小程序中如何根据Radio选中来切换样式.效果如下: 原理主要是通过判断一个radio-group中哪个被选中,就让它加上一个"active"的样式. 代码如下:  <view class="container"> <radio-group bindchange="radioCheckedChange"> <vi
微信小程序（十九）radio组件详细介绍

radio组件为单选组件与radio-group组合使用,使用方式和checkbox没啥区别主要属性: wxml  <radio-group bindchange="listenerRadioGroup">  <label style="display: flex" wx:for-items="{{a
微信小程序radio组件使用详解

本文为大家分享了微信小程序radio组件的使用方法,供大家参考,具体内容如下效果图 WXML <view class="tui-content"> <radio-group class="radio-group" bindchange="radioChange"> <label class="radio" wx:for="{{items}}"> <view cla
微信小程序日历组件calendar详解及实例

微信小程序日历组件calendar详解及实例模版使用: src="../cal/calendar.wxml"> is="calendar" data="{{selected_value,days,month,years,lunar_years,lunar_month,lunar_days,selectDateType,l unar_selected_value}}"> JS代码使用: var Calendar = require('
微信小程序slider组件使用详解

本文为大家分享了微信小程序slider组件的使用方法,供大家参考,具体内容如下效果图 WXML <view class="tui-content"> <view class="tui-slider-head">设置step,当前设置步伐为5,当前值:{{slider1}}</view> <view class="tui-slider-box"> <slider bindchange=&quo
微信小程序progress组件使用详解

本文为大家分享了微信小程序progress组件的使用方法,供大家参考,具体内容如下效果图 WXML <view class="tui-content"> <view class="tui-menu-list"> <text>show-info在进度条右侧显示百分比</text> <progress percent="50" show-info /> </view> <
微信小程序switch组件使用详解

本文实例为大家分享了微信小程序switch组件的实现代码,供大家参考,具体内容如下效果图 HTML <div class="switch-list"> <span class="fui-fr">红色switch组件</span> <input class="fui-switch" style="color:rgb(255, 0, 0);" type="checkbox&qu
微信小程序checkbox组件使用详解

本文为大家分享了微信小程序checkbox组件的使用方法,供大家参考,具体内容如下效果图 WXML <view class="tui-content"> <checkbox-group bindchange="checkboxChange"> <label class="checkbox" wx:for="{{items}}"> <view class="tui-menu-
微信小程序button组件使用详解

本文为大家分享了微信小程序button组件的使用方法,供大家参考,具体内容如下展示效果图 button组件的常用属性 size:default.mini--default为块级按钮.mini为小按钮 type:primary.default.warn--primary提交成功.default默认灰色.warn警告色 plain:true.false--按钮是否镂空,背景色透明 disabled:true.false--是否禁用 loading:true.false--名称前是否带 loadin
微信小程序icon组件使用详解

微信小程序icon组件的实现,具体如下原生的icon组件的属性 WXML <view class="icon-group"> <icon wx:for="{{typeList}}" type="{{item}}" size="40"></icon> </view> JS Page({ data: { typeList: ['success', 'success_no_circl
微信小程序弹窗组件使用详解

介绍最近在开发小程序应用, 发现小程序当中有关于组件的介绍非常的少, 当前自己做的项目当中,有出现过这种情况, 所以自己就封装了一个小程序的弹窗组件, 现在把自己的心得分享给大家, 大家一起来学习吧效果图需求背景项目需求是需要在页面上通过点击按钮, 然后弹出弹窗蒙层; 因为小小程序当中经常会用到弹窗, 因此这里我直接将弹窗封装成了一个组件, 下次使用的时候,直接调用就可以了. 实现步骤 1.在微信小程序当中, 在当前项目当中, 新建一个component文件夹, 这个文件夹专门用来存放我
微信小程序 Image组件实例详解

image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源,都用src属性去指定. 重点属性: 三种缩放模式九种剪切方式 wxml <!--3中是缩放模式 scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素 aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来.也就是说,可以完整地将图片显示出来. aspectFill 保持纵横比缩放图片,只保证图片

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

相关推荐

随机推荐