uniapp + vue + scss 实现简单换肤功能

 

1.第一步首先在我自定义的公共文件中建立 scss 文件 此文件主要是 写入 混入换肤方法如图:⬇️

uniapp + vue + scss 实现简单换肤功能_第1张图片

2.第二步在uni.scss中引入建立的scss文件并设置要用到的换肤颜色如图:⬇️

uniapp + vue + scss 实现简单换肤功能_第2张图片

3.第三步在设置换肤界面写入js如图:⬇️

uniapp + vue + scss 实现简单换肤功能_第3张图片

uniapp + vue + scss 实现简单换肤功能_第4张图片

4.直接上代码.

(1).(自定义的scss文件代码)

@mixin bg_color($color) { //更换背景
	background-color: $color ;
	[data-theme = "theme"] & {
		background-color: $background-color-theme !important;
	}
	[data-theme = "theme1"] & {
		background-color: $background-color-theme1 !important;
	}
	[data-theme = "theme2"] & {
		background-color: $background-color-theme2 !important;
	}	
	[data-theme = "theme3"] & {
		background-color: $background-color-theme3 !important;
	}	
}

@mixin ft_color($color) { //更换文字颜色
	color: $color;
	[data-theme = "theme3"] & {
		color: $text-color-theme3 !important;
	}	
}

(2)(uni.scss 代码)

/*
    切记一定要在 uni.scss 预加载文件中 引入 自定义的 mixin.scss 并设置皮肤色
*/
@import '@/commponts/css/mixin.scss';   //引入混入背景
$background-color-theme: #3f77ff;		//背景主题颜色默认(蓝色)
$background-color-theme1: red;			//背景主题颜色1(红色)
$background-color-theme2: #632af1;		//背景主题颜色2(紫色)
$background-color-theme3: #ffffff;		//背景主题颜色3(白色/取消主题)
$text-color-theme:#fff;					//白色(通用主题字体颜色)
$text-color-theme3:#333;				//黑色(取消主题使用字体颜色)

(3).(设置皮肤的界面) 





export default {
		data() {
			return {
				
			}
		},
		onLoad: function() {
			_self = this;
		},
		methods: {
			bgColorBtn(objCl) {
				window.document.documentElement.setAttribute('data-theme', objCl);
			}
		}
	}

(4).首页界面






(5).详情界面






(6).头部组件的样式代码




 

你可能感兴趣的:(个人学习笔记)