uni-app switch 组件 color 属性不生效

uni-app switch 组件 color 属性不生效

开发环境 版本号 项目创建方式
Windows win 11 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win 11

HBuilderX类型：正式

HBuilderX版本号：3.4.13

手机系统：Android

手机系统版本号：Android 11

手机厂商：小米

手机机型：redmi note 8

页面类型：nvue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

```html
<switch class="switch" color="#FFCC33" checked />

操作步骤：

<switch class="switch" color="#FFCC33" checked />

预期结果：

设置为黄色

实际结果：

绿色

bug描述：

color 属性不生效

更多关于uni-app switch 组件 color 属性不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

未复现此问题。用示例代码hello uni-app能出现你的问题吗？不能的话请排查下具体问题，并提供可复现bug的最小化demo（上传附件），让我们及时定位问题，及时修复 【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

更多关于uni-app switch 组件 color 属性不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


nvue

<switch class="switch" color="#FFCC33" />

这段代码 也是 从 hello uni-app copy 过来的

在 uni-app 中使用 switch 组件时，color 属性用于设置开关的背景色。如果 color 属性不生效，可能有以下几种原因：

1. 检查平台兼容性

switch 组件的 color 属性在某些平台上可能不支持，或者表现不一致。uni-app 是一个跨平台框架，不同平台（如微信小程序、H5、App 等）对组件的支持程度不同。

  • 微信小程序：支持 color 属性。
  • H5：支持 color 属性。
  • App：支持 color 属性，但可能在某些情况下表现不一致。

如果你在某个平台上发现 color 属性不生效，可以尝试在其他平台上测试，或者查阅官方文档确认该平台是否支持。

2. 检查代码是否正确

确保你正确使用了 color 属性。以下是一个示例代码：

<template>
  <view>
    <switch color="#FF0000" />
  </view>
</template>

在这个示例中，color 属性被设置为 #FF0000，即红色。如果颜色不生效，检查是否有其他样式覆盖了 switch 组件的样式。

3. 检查样式覆盖

如果你在项目中使用了自定义样式或全局样式，可能会覆盖 switch 组件的默认样式。检查是否有其他样式影响了 switch 组件的显示。

你可以尝试在 switch 组件上直接使用 style 属性来设置颜色，看看是否生效：

<template>
  <view>
    <switch style="background-color: #FF0000;" />
  </view>
</template>
回到顶部