在uniapp中引入 colorui.css 样式文件后，导致switch控件默认样式失效，经过摸索验证，终于找到原因。
目录
[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 文件)
运行环境：
- 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';
// iconfont1.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属性设置；
附录：