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

1.第一步首先在我自定义的公共文件中建立 scss 文件此文件主要是写入混入换肤方法如图：⬇️2.第二步在uni.scss中引入建立的scss文件并设置要用到的换肤颜色如图：⬇️3.

奋斗在前端的实习小白

4932人浏览 · 2020-07-22 15:52:30

奋斗在前端的实习小白 · 2020-07-22 15:52:30 发布

<!--

仅作为自我学习的一个记录

参考作者地址：https://blog.csdn.net/m0_37792354/article/details/82012278 感谢🙏 作者的无私分享精神

-->

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

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

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

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).（设置皮肤的界面）

<!--
    html 代码 foldingCmp为各人封的组件 这块自己随便写
-->
<template>
<foldingCmp titles="主题设置">
			<template slot="folding">  <!--v-slot:folding="slotProps"回调-->
			    <view class="grace-columns">
					<view class="grace-space-between bg"  @tap="bgColorBtn('theme3')">
						<view class="qxColor grace-box-shadow"></view>
						<view>预览背景</view>
					</view>
			    	<view class="grace-space-between bg"   @tap="bgColorBtn('theme1')">
			    		<view class="redColor grace-box-shadow"></view>
			    		<view style="color: red;">预览背景</view>
			    	</view>
					<view class="grace-space-between bg"  @tap="bgColorBtn('theme2')">
						<view class="zsColor grace-box-shadow"></view>
						<view style="color: #632af1;">预览背景</view>
					</view>
					<view class="grace-space-between bg"   @tap="bgColorBtn('theme')">
						<view class="mrColor grace-box-shadow"></view>
						<view style="color: #3f77ff;">预览背景</view>
					</view>
			    </view>
			</template>
		</foldingCmp>
</template>

<!--
    事件方法（非常重要）
-->
export default {
		data() {
			return {
				
			}
		},
		onLoad: function() {
			_self = this;
		},
		methods: {
			bgColorBtn(objCl) {
				window.document.documentElement.setAttribute('data-theme', objCl);
			}
		}
	}
<style lang="scss">
	.publicCl {//公用样式1
		width: 80rpx;
		height: 80rpx;
		border-radius: 20rpx;
	}
	
	.bg{
		width: 95%;
		padding: 10rpx 0rpx 10rpx 2.5%;
		border-bottom: 1px solid #E5E5E5;
	}
	.bg > view:nth-child(2){
		line-height: 80rpx;
	}
	.grace-flex {
		display: flex;
		margin-left: 5%;
	}

	.qxColor {
		background-color: $background-color-theme3;
		@extend .publicCl
	}

	.redColor {
		background-color: $background-color-theme1;
		@extend .publicCl
	}

	.zsColor {
		background-color: $background-color-theme2;
		@extend .publicCl
	}

	.mrColor {
		background-color: $background-color-theme;
		@extend .publicCl
	}

	.bgColor {
		line-height: 80rpx;
		width: 100%;
		height: 80rpx;
		@include bg_color($background-color-theme);
		@include ft_color($text-color-theme);
	}
	.fh_color{
		@include ft_color($text-color-theme) ;
	}
</style>

(4).首页界面

<template>
	<view class="content">
		<headerCmp back="4" id="headerCmp" middleTitle="首页"></headerCmp>
		<image class="logo" src="/static/logo.png" @tap="detaile"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view class="bgColor">11111</view>
	</view>
</template>

<script>
	let _self;
	import '../../commponts/css/mixin.scss';
	export default {
		data() {
			return {
				filterTop:'',
				title: 'Hello'
			}
		},
		onLoad:function(){
			_self = this;
		},
		methods: {
			detaile() {
				uni.navigateTo({
					url: './detaile'
				})
			},
			headerInfo(msg) {
				const query = uni.createSelectorQuery().in(this);
				query.select('#headerCmp').boundingClientRect(data => {
					let height = data.height;
					_self.filterTop = height;
					resolve();
				}).exec();

			},
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.bgColor {
		color: #FFFFFF;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		@include bg_color($background-color-theme);
	}
</style>

(5).详情界面

<template>
	<view>
		<headerCmp id="headerCmp" middleTitle="详情"></headerCmp>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			
		}
	}
</script>

<style lang="scss">
	.bgColor{
		width: 100%;
		height: 80rpx;
		color: #FFFFFF;
		@include bg_color($background-color-theme) ;
	}
</style>

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

<template>
	<view>
		<view class="grace-header bgColor">
					<view class="grace-flex flex-1">
						<view></view>
					</view>
					<view class="middle_font">{{middleTitle}}</view>
					<view class="flex-1 right_font" @click="rightBtn()">{{rightTitle}}</view>
					
				</view>

			</view>
			<view :style="{width:BoundingWidth, height:'10px'}"></view>
		</view>
		<!-- 占位 view -->
		<view :style="{height:paddingTop+appInfo.top+'px'}" v-if="isSeize"></view>
	</view>
</template>
<script>
	export default {
		props: {
			height: {
				type: Number,
				default: 90
			},
			haveStatusBar: {
				type: Boolean,
				default: true
			},
			isSeize: {
				type: Boolean,
				default: true
			},
			leftTitle: {
				type: String,
				default: '返回'
			},
			middleTitle: {
				type: String,
				default: '标题'
			},
			rightTitle: {
				type: String,
				default: ''
			},
			back: { //1 直接返回   2：提示 返回
				type: [Number,String],
				default: 1
			}
		},
		data() {
			return {
				top: 0,
				paddingTop: 0,
				BoundingWidth: '0px',
				fhImg: 'fh_img',
				appInfo: this.appSysInfo || {}

			}
		},
		created: function() {
			let _self = this;
			
		},
		methods: {
			leftBtnPlus() {

				this.routerBack();
			},
			rightBtn() {

				if (this.rightTitle) {
					this.$emit('rightBtn');
				}
			}
		}
	}
</script>
<style lang="scss">
	.bgColor {
		width: 100%;
		height: 80rpx;
		color: #FFFFFF;
		@include bg_color($background-color-theme);
	}
	

	

	.fh_color{
		@include ft_color($text-color-theme) ;
	}
	.fh_font {
		@include ft_color($text-color-theme) ;
		margin-bottom: 20upx;
		font-size: 34upx;
		line-height: 80upx;
		text-align: left;
		width: 100upx;
	}

	.middle_font {
		margin-top: 2upx;
		margin-bottom: 20upx;
		font-size: 36upx;
		@include ft_color($text-color-theme) ;
		line-height: 80upx;
		text-align: center;
		padding-left: 25upx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
</style>

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐