微信小程序radio详解

一、微信小程序radio组件

微信小程序radio组件用于让用户在几个互斥的选项中选择一个选项。每个选项可以是单个字或一个图标。

使用微信小程序radio的前提是需要在json文件中进行注册：

{
  "usingComponents": {
    "radio": "/components/radio/index"
  }
}

然后在wxml文件中使用radio组件：

  //radio组件
  

  

其中value属性是radio的标识符，checked属性表示是否被选中，disabled属性表示是否被禁用，color属性表示radio选中时的颜色，bindchange事件表示radio选项发生改变时触发的事件。

二、微信小程序radio未选中状态

当radio未被选中时，radio的icon默认是一个圆形，可以通过设置radio组件的颜色来改变icon被选中时的颜色。

代码示例：

  //未选中的radio组件
  

  

三、微信小程序radio数据上传数据库

当我们需要将用户选择的radio数据上传至数据库时，可以使用微信提供的wx.request()方法。其中需传入三个主要参数：url、method和data。

示例代码：

  wx.request({
    url: 'https://xxx.xxx.xxx',
    method: 'POST',
    data: {
      //上传数据
      radioValue: value
    },
    success: function (res) {
      //成功后的回调函数
    }
  })

四、微信小程序radio没有被选中

当radio没有被选中时，我们可以通过判断checked属性来实现相应的逻辑处理。例如当radio未被选中时，禁用某个按钮。

代码示例：

//wxml中

按钮

//js中
Page({
  data: {
    checked: false
  },
  onRadioChange: function (event) {
    this.setData({
      checked: !this.data.checked
    })
  }
})

五、微信小程序radio样式改变

微信小程序radio默认样式可以通过修改微信默认样式进行改变。当然也可以使用css样式表进行自定义。例如将微信默认的圆形radio改为正方形。

代码示例：

  //在app.wxss中进行样式修改
  .radio-container::before {
    content: ' ';
    display: inline-block;
    width: 50rpx;
    height: 50rpx;
    margin-right: 30rpx;
    border: 1rpx solid #666666;
    border-radius: 4rpx;
  }
  .radio-container.radio-checked::before {
    background-color: #666666;
  }
  .radio-container.radio-checked::after {
    content: ' ';
    position: absolute;
    display: inline-block;
    width: 40rpx;
    height: 40rpx;
    margin: 5rpx;
    background-color: #ffffff;
    border-radius: 4rpx;
  }

六、微信小程序radio 必须有默认值吗

微信小程序radio并不一定需要有默认值。当我们需要一个非必填且无默认值的radio时，可以将checked属性设置成null。当然也可以设置多个radio为选中状态，只需要修改相应的value和checked属性值就可以了。

代码示例：

七、微信小程序radio怎么打印

当我们需要在console中打印radio的值时，可以在onRadioChange()事件触发中，使用console.log()将value打印出来即可。

代码示例：

  Page({
    onRadioChange: function (event) {
      console.log('radio发生change事件，携带value值为：', event.detail.value)
    }
  })

八、微信小程序radio实现点击换颜色

我们可以在onRadioChange()事件触发中，通过修改radio的颜色属性来实现点击改变颜色。当然也可以使用动态class名称来实现。

代码示例：

  
  
  

  //js
  Page({
    data: {
      color: 'red'
    },
    onRadioChange: function (event) {
      this.setData({
        color: 'blue'
      })
    }
  })

九、微信小程序radio重新渲染选取

当我们需要在radio选项中动态添加或删除选项时，需要重新渲染radio组件以正确显示出选项状态。

代码示例：

  //wxml
  
    
   
      
    
        {{item.name}}
      
    
    
   
  
  
  添加选项
  删除选项

  //js
  Page({
    data: {
      radioItems: [
        { name: '选项一', value: '0', checked: true },
        { name: '选项二', value: '1' }
      ]
    },
    radioChange: function (event) {
      var checked = event.detail.value;
      var radioItems = this.data.radioItems;
      for (var i = 0; i < radioItems.length; i++) {
        if (radioItems[i].value == checked) {
          radioItems[i].checked = true;
        }
        else {
          radioItems[i].checked = false;
        }
      }
      this.setData({
        radioItems: radioItems
      });
    },
    addRadioItem: function () {
      var radioItems = this.data.radioItems;
      radioItems.push({ name: '选项' + radioItems.length + 1, value: radioItems.length + 1 });
      this.setData({
        radioItems: radioItems
      });
    },
    deleteRadioItem: function () {
      var radioItems = this.data.radioItems;
      radioItems.pop();
      this.setData({
        radioItems: radioItems
      });
    }
  })

总结

在实际开发过程中，微信小程序radio组件是不可或缺的一部分。它可以使用户更直观地了解选项，提高用户体验。同时，我们需要充分了解并掌握radio组件的各种属性和事件，才能更好地使用它们来实现我们的需求。