微信小程序——单选项

对于小程序单选，官方文档已经贴出了代码，我这里也不做过多解释，只是分享给大家一个小功能

一般在单选或者多选时，都会出现“其他”这个选项，如果通过input焦点事件、失焦事件来控制，代码会很繁琐

这里可以用到“for”来绑定“id”

<radio id="item1"  style="display:none"/>
<label for='item1' class='other clearfix'>
      <text>其他：</text>
      <input placeholder='请填写'></input>
</label>

也就是说，其实这个“其他”还是一个单选项，只不过与label绑定在一起，点击“其他”时，就相当于点击了被隐藏的radio。

当前单选项完整的代码：

<view class="section">
    <view class="section__title">1、问题</view>
    <radio-group name="group1" >
      <label class='radio-group-row'>
        <radio  value="回答1" color="#ffffff"/>回答1
      </label>
      <label class='radio-group-row'>
        <radio  value="回答2" color="#ffffff"/>回答2
      </label>
      <label class='radio-group-row'>
        <radio  value="回答3" color="#ffffff"/>回答3
      </label>
      <label class='radio-group-row'>
        <radio id="item1" style='display:none'/>
        <label for='item1' class='other clearfix'>
          <text>其他：</text>
          <input placeholder='请填写' ></input>
        </label>
      </label>
    </radio-group>
  </view>

 

 

改变radio原生样式：

/*  重写 radio 样式  */
/* 未选中的 背景样式 */
radio .wx-radio-input{
  border-radius: 50rpx;
  height: 28rpx;
  width: 28rpx;
}
/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
radio .wx-radio-input.wx-radio-input-checked::before{
   border-radius: 50rpx;/* 圆角 */
   height: 28rpx;
   width:28rpx;
   line-height: 28rpx;
   text-align: center;
   color:#4F96FF; /* 对勾颜色 白色 */
   background: #ffffff;
   font-size: 20rpx;
   margin:0;
   transform:translate(-50%, -50%) scale(1);
   -webkit-transform:translate(-50%, -50%) scale(1);
}