uni-app中radio的color属性在微信小程序上无效

在uni-app中，radio 组件的 color 属性用于设置单选按钮的选中颜色。然而，这个属性在微信小程序上可能不生效，因为uni-app的组件属性在不同平台上可能会有不同的表现。为了解决这个问题，我们可以通过自定义样式来实现类似的效果。

下面是一个示例，展示如何在uni-app中为radio组件设置自定义样式，以确保在微信小程序上也能正确显示选中的颜色。

首先，在你的uni-app项目的页面或组件中，使用radio-group和radio组件，并添加一个自定义的类名，例如custom-radio。

<template>
  <view>
    <radio-group @change="radioChange">
      <label v-for="(item, index) in options" :key="index" class="radio-label">
        <radio :value="item.value" class="custom-radio" :checked="item.checked"></radio>
        <text>{{ item.text }}</text>
      </label>
    </radio-group>
  </view>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { text: 'Option 1', value: '1', checked: false },
        { text: 'Option 2', value: '2', checked: false },
        { text: 'Option 3', value: '3', checked: false }
      ]
    };
  },
  methods: {
    radioChange(e) {
      const value = e.detail.value;
      this.options = this.options.map(option => ({
        ...option,
        checked: option.value === value
      }));
    }
  }
};
</script>

<style>
.custom-radio::after {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid #000;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.custom-radio.wx-radio-checked::after {
  background-color: #ff0000; /* 自定义选中颜色 */
}

.radio-label {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  position: relative;
  padding-left: 24px;
}
</style>

在这个示例中，我们通过CSS伪元素::after来创建一个自定义的单选按钮外观，并使用.wx-radio-checked类（这是微信小程序为选中状态添加的类名）来设置选中时的背景颜色。注意，由于uni-app编译到微信小程序时会自动添加一些类名（如wx-radio-checked），因此我们需要依赖这些类名来进行样式定制。

这种方法虽然需要一些额外的样式工作，但能够确保在不同平台上实现一致的视觉效果。