小程序单选框radio的用法

最新推荐文章于 2023-04-19 17:19:41 发布

qq_36359560

最新推荐文章于 2023-04-19 17:19:41 发布

阅读量1.2w

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_36359560/article/details/94240616

本文详细介绍如何在微信小程序中实现性别选择的单选框功能，包括wxml代码的使用，如image、label、radio-group等组件的配置，以及通过wx:for-items循环遍历数组实现动态选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们准备做一个如下图所示的单选框
在这里插入图片描述
wxml代码如下：

  <!--性别-->
<view class="inputView0">
  <image class="keyImage" src="../../icons/ico-sex.png"></image> 
  <label class="loginLab">性别</label>
<radio-group class='radio-group' bindchange="radioChange">
    <radio  class='radio'style='margin-left: 11px;' wx:for-items="{{sexs}}" wx:key="num" value="{{item.num}}" checked="{{item.checked}}">
    <text class="loginLab" style='margin-left: 0px;'>{{item.value}}</text>
    </radio>
</radio-group>

1.image
插入图片，原理很简单，这里不赘述

2.label
标签

3.radio-group
包括所有选项一个整体，里面的bindchange属性是当选项变化时触发的事件

4.radio
wx-for-items是事先要写好的一个数组（这里为sexs），里面包含了选项内容和选项输出，value就是选项输出，checked表示是否默认选中

5.sexs数组
在js中的page里面的data定义：
在这里插入图片描述