uni-app中uni-segmented-control设置activeColor在H5生效微信小程序不生效 且text上的style未解析为String而为Object

在 uni-app 中使用 uni-segmented-control 组件时，遇到 activeColor 在 H5 生效但在微信小程序不生效的问题，以及 text 上的 style 未解析为 String 而为 Object 的情况，可能是由于以下原因导致的：

1. activeColor 在小程序不生效

uni-segmented-control 组件的 activeColor 属性在不同平台上的支持可能存在差异。在微信小程序中，activeColor 可能没有被正确解析或应用。

解决方案：

• 手动设置样式：你可以通过 style 或 class 手动设置选中项的颜色。例如：

  <uni-segmented-control :current="current" :values="items" [@clickItem](/user/clickItem)="onClickItem" :style="{'--active-color': activeColor}" />
  

  然后在 CSS 中：

  .uni-segmented-control__item--active {
    background-color: var(--active-color);
  }
  

• 使用平台条件编译：如果 activeColor 在微信小程序中不生效，你可以使用条件编译来为不同平台设置不同的样式。

  <uni-segmented-control :current="current" :values="items" [@clickItem](/user/clickItem)="onClickItem" :style="isMP ? mpStyle : h5Style" />
  

  然后在 script 中：

  export default {
    data() {
      return {
        current: 0,
        items: ['选项1', '选项2', '选项3'],
        activeColor: '#007aff',
        isMP: process.env.VUE_APP_PLATFORM === 'mp-weixin',
        mpStyle: { backgroundColor: '#007aff' },
        h5Style: { backgroundColor: '#007aff' }
      };
    },
    methods: {
      onClickItem(e) {
        this.current = e.currentIndex;
      }
    }
  };
  

2. text 上的 style 未解析为 String 而为 Object

在 uni-app 中，style 属性可以是 String 或 Object 类型。如果你传递了一个 Object，它应该会被自动转换为 String。如果未正确解析，可能是因为某些平台的差异或框架的 bug。

解决方案：

• 手动转换为 String：你可以手动将 style 对象转换为 String。

  <uni-segmented-control :current="current" :values="items" [@clickItem](/user/clickItem)="onClickItem" :style="styleToString(styleObject)" />
  

  然后在 script 中：

  export default {
    data() {
      return {
        current: 0,
        items: ['选项1', '选项2', '选项3'],
        styleObject: { backgroundColor: '#007aff', color: '#ffffff' }
      };
    },
    methods: {
      onClickItem(e) {
        this.current = e.currentIndex;
      },
      styleToString(style) {
        return Object.entries(style).map(([key, value]) => `${key}: ${value}`).join(';');
      }
    }
  };
  

• 使用 computed 属性：你可以使用 computed 属性来动态生成 style 字符串。

  <uni-segmented-control :current="current" :values="items" [@clickItem](/user/clickItem)="onClickItem" :style="styleString" />
  

  然后在 script 中：

  export default {
    data() {
      return {
        current: 0,
        items: ['选项1', '选项2', '选项3'],
        styleObject: { backgroundColor: '#007aff', color: '#ffffff' }
      };
    },
    computed: {
      styleString() {
        return Object.entries(this.styleObject).map(([key, value]) => `${key}: ${value}`).join(';');
      }
    },
    methods: {
      onClickItem(e) {
        this.current = e.currentIndex;
      }
    }
  };