微信小程序如何设置一个长尾词单选题，让用户轻松选择？

本文共计678个文字，预计阅读时间需要3分钟。

原文示例：本文字例为大家分享了微信小程序实现单选按钮的具体代码，供大家参考。具体内容如下：

逻辑 + 单选框的逻辑比较简单，把所有元素遍历出来，等到点击单选按钮的时候，当value值与遍历出的匹配时，...

改写后：本例展示如何用微信小程序实现单选按钮功能。代码逻辑简单，遍历所有元素，点击单选按钮时，比较value值与遍历结果，实现选择。

本文实例为大家分享了微信小程序实现单选按钮的具体代码，供大家参考，具体内容如下

逻辑

• 单选框的逻辑比较简单，把所有的元素遍历出来，等到点击单选按钮的时候，当value值与遍历变量值一致的时候就 把checked 设置为true，其他的时候把checked设置为 false 只需要一次循环。
• 复选框的逻辑，也不复杂，当只有一个被选中的选项的时候，当点击已经选择的选项的时候，首选外层循环设置为false，这个时候 e.detail.value为零，所以无法进入内层循环，所以被取消。当选中未选择的选项的时候，则从第一个选项开始遍历，如果value值与外层相同则设置为TRUE。然后跳出内层，继续遍历，当有两个选中的选项的时候，点击已经选择的按钮，values值会减少l，所以最后一次的外层循环无法进入内层，所有取消该选项。

举例， 两选一 , 默认选中第一个；效果图如下：

.wxml文件 ：

<view class='button_container'>   <block wx:for="{{buttons}}" wx:key="buttons">     <button class='{{item.checked?"checked_button":"normal_button"}}' data-id='{{item.id}}' bindtap='radioButtonTap'>{{item.name}}</button>   </block> </view>

.js文件 ：

Page({   data:{     buttons: [{ id: 1, name: '失物招领' }, { id: 2, name: '寻物启事' }]   },   onLoad: function() {//默认选了第一个     this.data.buttons[0].checked = true;     this.setData({       buttons: this.data.buttons,     })   },       radioButtonTap: function (e) {   console.log(e)   let id = e.currentTarget.dataset.id   console.log(id)   for (let i = 0; i < this.data.buttons.length; i++) {     if (this.data.buttons[i].id == id) {       //当前点击的位置为true即选中       this.data.buttons[i].checked = true;         }     else {       //其他的位置为false     this.data.buttons[i].checked = false;     }   }   this.setData({   buttons: this.data.buttons   })   } })

.wxss文件 ：

.button_container{   display: flex;   flex-direction: row;   justify-content: space-around   }      /* 按钮未选中 */  .normal_button{   background: white；   }      /* 按钮选中 */   .checked_button{   background: #36ab60;   color: white   }```

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