uniapp Switch控件背景颜色自定义

在uniapp中引入 colorui.css 样式文件后，导致switch控件默认样式失效，经过摸索验证，终于找到原因。

1、案例剖析

[1.1、App.vue 文件](#1.1、App.vue 文件)

[1.2、index.scss 文件](#1.2、index.scss 文件)

[1.3、colorui.css 文件](#1.3、colorui.css 文件)

[1.4、system-setting.vue 文件](#1.4、system-setting.vue 文件)

2、实践总结

运行环境：

Windows-10-x64
HBuilderX-4.66

以下是 uniapp 项目中，使用switch控件相关的代码片段，供参考......

1、案例剖析

1.1、App.vue 文件

在项目根目录下的 App.vue文件中，导入公共样式文件 index.scss。

css 复制代码

<style lang="scss">
    // 公共样式
    @import '@/static/scss/index.scss';
</style>

1.2、index.scss 文件

在 index.scss文件中导入 colorui.css

css 复制代码

// global

// color-ui
@import '@/static/scss/colorui.css';

// iconfont

1.3、colorui.css 文件

部分样式摘录，重点关注 switch控件、switch 样式 blue、red 等的定义。

1.4、system-setting.vue 文件

本例文件完整代码如下

javascript 复制代码

<template>
    <view class="popup-container" @tap.stop.prevent>
        <view class="control-container">
            <view class="header">
                <text class="title">设置</text>
                <text class="close-btn" @click="closeView">×</text>
            </view>
            <view class="control-item">
                <text class="control-label">震动1</text>
                <switch type="switch" :class="isVibrating ? 'blue checked' : 'blue'" color="#007AFF" :checked="isVibrating" @change="toggleVibration" />
            </view>
            <view class="control-item">
                <text class="control-label">震动2</text>
                <switch type="switch" :class="isVibrating ? 'green checked' : 'green'" color="#007AFF" :checked="isVibrating" @change="toggleVibration" />
            </view>
            <view class="control-item">
                <text class="control-label">震动3</text>
                <switch type="switch" :class="isVibrating ? 'red checked' : 'red'" color="#007AFF" :checked="isVibrating" @change="toggleVibration" />
            </view>
            <view class="control-item">
                <text class="control-label">性别</text>
                <switch type="switch" :class="isVibrating ? 'switch-sex checked' : 'switch-sex'" color="#007AFF" :checked="isVibrating" @change="toggleVibration" />
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                isVibrating: true, // 震动马达开启/关闭（默认：true）
            }
        },
        methods: {
            /** @description 关闭窗口 */
            closeView() {
                // TODO
            },
            /**
             * @description 震动马达开启/关闭事件
             * @param {Object} e 事件对象
             */
            toggleVibration(e) {
                this.isVibrating = e.detail.value; // 当前Switch的值（true：开；false：关）
                if (this.isVibrating) {
                    uni.vibrateShort(); // 短震动测试
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
    // 窗口容器
    .popup-container {
        background-color: rgba(0, 0, 0, 0.5);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 999999;
    }

    // 窗口容器
    .control-container {
        background-color: #f8f8f8;
        border-radius: 20rpx;
        padding: 20rpx;
        margin: 20rpx;
        position: fixed;
        z-index: 9999999;
        top: calc(50% - 20rpx);
        left: calc(50% - 20rpx);
        transform: translate(-50%, -50%);
        width: 100%;
        max-width: 600rpx;
    }

    // 窗口标题栏
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0 20rpx 0;
        border-bottom: 1rpx solid #eee;
        margin-bottom: 20rpx;
    }

    // 窗口标题栏>>窗口标题
    .title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        text-align: center;
        width: calc(100% - 40rpx);
    }

    // 窗口正文>>项目
    .control-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20rpx 0;
        border-bottom: 1rpx solid #eee;
    }

    // 窗口正文>>项目>>最后一子项目底部边框
    .control-item:last-child {
        border-bottom: none;
    }

    // 窗口正文>>项目>>子项目标题
    .control-label {
        font-size: 32rpx;
        color: #333;
    }
</style>

2、实践总结

在项目中引入 colorui.css 样式文件，会导致原 uniapp的样式失效，表现有：

导致原控件的 uniapp的样式失效；
会忽略switch 控件的 color属性设置；

附录：

switch | uni-app官网