微信小程序单选框自定义赋值

微信小程序中的单选框组件通常会使用预设选项进行赋值。但有时候，我们需要自定义单选框的选项内容和值。下面是一些实现自定义单选框赋值的方法：

微信小程序中的单选框组件通常会使用预设选项进行赋值。但有时候，我们需要自定义单选框的选项内容和值。下面是一些实现自定义单选框赋值的方法：

方式一：使用wx:for循环渲染视图和数据

我们可以使用wx:for指令和数组来实现自定义单选框赋值。首先，定义一个数组用于存储单选框的选项，数组中每一项表示单选框的一个选项，包含一个name属性表示选项文本，一个value属性表示选项值。例如：

Page({
  data: {
    options: [{
      name: '选项1',
      value: '1'
    }, {
      name: '选项2',
      value: '2'
    }, {
      name: '选项3',
      value: '3'
    }]
  },
  onChange: function(event) {
    console.log('选中的值为：', event.detail.value)
  }
})

然后，在wxml视图中，使用wx:for遍历options数组，渲染出每个单选框：

<view wx:for="{{options}}" wx:key="value">
  <radio-group bindchange="onChange">
    <radio label="{{item.value}}" checked="{{item.checked}}">
      {{item.name}}
    </radio>
  </radio-group>
</view>

在每个单选框的label属性中，使用item.value为选项赋予自定义的值，而item.checked则用于标识是否选中。

方式二：使用自定义组件封装单选框

如果需要多次使用自定义单选框组件，可以使用自定义组件来封装单选框。首先，创建一个radios组件：

<!-- ./components/radios/radios.wxml-->
<view wx:for="{{options}}" wx:key="value">
  <radio-group bindchange="onChange">
    <radio label="{{item.value}}" checked="{{item.checked}}">
      {{item.name}}
    </radio>
  </radio-group>
</view>

在radios.js文件中，定义选项数组和onChange事件处理函数：

Component({
  properties: {
    options: {
      type: Array,
      value: []
    }
  },
  data: {
    checkedValue: ''
  },
  methods: {
    onChange(event) {
      this.setData({
        checkedValue: event.detail.value
      })
      this.triggerEvent('change', this.data.checkedValue)
    },
  }
})

在使用radios组件时，可以通过传入options属性显示自定义的单选框选项：

<!-- ./pages/index/index.wxml -->
<radios options="{{options}}" bind:change="onRadioChange"></radios>

在index.js中定义options属性，并实现onRadioChange事件处理函数：

Page({
  data: {
    options: [{
      name: '选项1',
      value: '1'
    }, {
      name: '选项2',
      value: '2'
    }, {
      name: '选项3',
      value: '3'
    }]
  },
  onRadioChange(event) {
    console.log('选中的值为：', event.detail)
  }
})

以上是两个示例，可以根据实际需求选择不同的方式实现自定义单选框赋值。