微信小程序如何自定义单选和多选

目录

实现单选

实现多选


实现单选

实现效果:点击显示单选状态,每次仅能点击一个元素。

af963008e74742d785579599ceeb469c.png

实现方式:

wxml: 

<view wx:for="{
  {item_list}}" data-info="{
  {index}}" class="{
  {menu_index===index?'choose':'no_choose'}}" bind:tap="changeColor">{
  {item}}</view>

 item_list是单选

  • 7
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
以下是一个简单的微信小程序单选框示例,当用户勾选选项时,会在控制台输出对应的值: ```html <view class="radio-group"> <label class="radio" bindtap="radioChange" data-value="option1"> <view class="radio__icon"></view> <view class="radio__label">选项1</view> </label> <label class="radio" bindtap="radioChange" data-value="option2"> <view class="radio__icon"></view> <view class="radio__label">选项2</view> </label> <label class="radio" bindtap="radioChange" data-value="option3"> <view class="radio__icon"></view> <view class="radio__label">选项3</view> </label> </view> ``` ```css .radio-group { display: flex; flex-direction: column; } .radio { display: flex; align-items: center; margin-bottom: 12px; } .radio__icon { width: 18px; height: 18px; border: 1px solid #999; border-radius: 50%; margin-right: 8px; } .radio__label { font-size: 16px; } .radio__icon.checked { background-color: #007aff; border-color: #007aff; } ``` ```javascript Page({ data: { selectedValue: '' }, radioChange: function(event) { const value = event.currentTarget.dataset.value; console.log('选中的值为:', value); this.setData({ selectedValue: value }); } }); ``` 在上面的示例中,我们首先创建了一个包含三个选项的单选框组,每个选项都是一个 `label`,并绑定了 `bindtap` 事件。当用户点击某个选项时,会触发 `radioChange` 函数,该函数会获取选项的值,并将其打印到控制台。我们还定义了一个 `selectedValue` 变量来保存用户选择的值。选项的样式可以根据自己的需求进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

句号(在IT行业摸爬滚打)

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值