<!--
仅作为自我学习的一个记录
参考作者地址: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>