uniapp换皮肤功能demo

最新推荐文章于 2024-04-18 06:50:47 发布

HelloMyCode

最新推荐文章于 2024-04-18 06:50:47 发布

阅读量4k

点赞数 1

分类专栏： uniapp scss 文章标签：前端

本文链接：https://blog.csdn.net/HelloMyCode/article/details/108747967

版权

本文介绍了如何在uniapp中实现换肤功能，通过创建项目目录结构，编写style.scss文件，定义样式值，并在App.vue中引入全局背景图片。利用uni-page-wrapper实现全屏背景，举例说明了将css转换为scss并提取动态变化值的方法。

摘要由CSDN通过智能技术生成

不支持scss的需要提前安装：https://www.runoob.com/sass/sass-install.html

全代码下载地址

1.新建一个uni-app的默认模板
在这里插入图片描述
2.构建如下图的项目目录结构，uni.scss是默认模板中自带的

3.写style.scss文件

/*
@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
*/
@mixin bg_color($color) {
    //更换背景颜色
	background-color: $color ;
	[data-theme = "theme1"] & {
   
		background-color: $background-color-theme1 !important;
	}
	[data-theme = "theme2"] & {
   
		background-color: $background-color-theme2 !important;
	}		
}
 
 @mixin bg_img($image) {
    //更换背景图片
 	background-image: $image ;
 	[data-theme = "theme1"] & {
   
 		background-image: url($background-image-theme1)!important;
 	}
 	[data-theme = "theme2"] & {
   
 		background-image: url($background-image-theme2)!important;
 	}
 }
  
 
@mixin ft_color($color) {
    //更换文字颜色
	color: $color;
	[data-theme = "theme1"] & {
   
		color: $text-color-theme1 !important;
	}
	[data-theme = "theme2"] & {
   
		color: $text-color-theme2 !important;
	}	
}

@mixin login_content($content) {
    //更换image标签内容
	content: $content;
	[data-theme = "theme1"] & {
   
		content:url($text-content-theme1) !important;
	}
	[data-theme = "theme2"] & {
   
		content: url($text-content-theme2) !important;
	}	
}