1.前言
- 功能介绍：提供个性化的展示方案给用户，用户可以选择喜欢的主题色，让App使用该主题色进行渲染
- 功能实现：主要分为2个模块，一，选择主题色并存储，二，读取选择的主题色，使用该颜色对部分内容进行渲染（导航栏，卡片边框，表格边框，按钮等）
2.选择颜色组件
-
一般在设置页面进行操作，通过弹窗形式，展示待选择的颜色列表，供用户筛选
-
选中目标颜色后，进行存储，供其他模块读取
-
使用了uni-ui 的组件（uni-popup）进行弹窗，代码如下
<template> <uni-popup ref="popup" type="bottom" class="zy-popup" background-color="#fff"> <view class="modal-wrap"> <view class="flex-box"> <view class="activeColorBox" :style="{backgroundColor: activeColor}"></view> <view class="activeColorText">颜色值：{{activeColor}}</view> <view style="width: 140rpx;"> <zy-button size="mini" @click="handleClickConfirm">确认</zy-button> </view> </view> <view class="color-picker-wrap"> <view class="color-picker-item" v-for="item in colorList" :key="item" :style="{backgroundColor: item}" @click="handleClickColor(item)"></view> </view> </view> </uni-popup> </template> <script> export default{ data(){ return { activeColor: "",//当前颜色 colorList: [ '#ff0033','#ff3399','#ff33cc','#cc00ff','#9900ff','#cc00cc','#cc0099','#cc3399','#cc0066','#cc3300', '#cc6600','#ff9933','#ffb700','#ff9966','#ff9999','#ff99cc','#ff99ff','#cc66ff','#9966ff','#cc33ff', '#663300','#996633','#cc9900','#a58800','#cccc00','#ffcccc','#336600','#669900','#009900','#009933', '#00cc00','#66ff66','#339933','#339966','#009999','#33cccc','#003366','#336699','#3366cc','#0099ff', '#000099','#0000cc','#660066','#993366','#993333','#800000','#999999','#666666','#333333','#000000' ],//可选的颜色列表 } }, methods: { //开启弹窗选择（供外部调用） open(){ //初始化当前颜色 this.activeColor = uni.getStorageSync("baseColor") || "#33cccc" //打开弹窗 this.$refs.popup.open() }, //点击颜色 handleClickColor(color){ //选中该颜色 this.activeColor = color }, //点击确认 handleClickConfirm(color){ //弹窗确认框 uni.showModal({ title: "提示", content: "换肤要重新登录", success: (res)=>{ //确认 if(res.confirm){ //保存该颜色 uni.setStorageSync("baseColor", this.activeColor) //关闭弹窗 this.$refs.popup.close() //跳到到登录页面 uni.reLaunch({ url: '/pages/login/index' }) } } }) } } } </script> <style scoped lang="scss"> .modal-wrap{ padding: 16rpx; /* #ifdef H5 */ padding-bottom: calc(50px + 12rpx); /* #endif */ .activeColorBox{ width: 140rpx; height: 36px; background-color: #fff; } .activeColorText{ font-size: 16px; color: #333; text-align: center; flex-grow: 1; } .color-picker-wrap{ margin-top: 16rpx; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; .color-picker-item{ width: 68rpx; height: 68rpx; border-radius: 6rpx; margin-bottom: 4rpx; // margin-right: 13rpx; // &:nth-child(10n){ // margin-right: 0; // } } } } </style>
3.导航栏
-
因为框架限制，无法全局修改导航栏主题色，只能每个页面加载的时候单独进行修改，建议将逻辑放入公共模块中（例如mixins），然后让页面引入执行
export default{
data(){
return {
baseColor: "#33cccc",//默认主题色
}
},
onLoad(){
//初始化主题色
this.initBaseColor()
},
onReady(){
//设置导航栏颜色，包括字体颜色
this.initNavigationBar()
},
methods: {
//初始化主题色
initBaseColor(){
//读取颜色
this.baseColor = uni.getStorageSync("baseColor") || "#33cccc"
},
//设置导航栏颜色，包括字体颜色
initNavigationBar(){
//字体颜色，默认白色
var fontColor = "#ffffff"
//浅色系背景，需要匹配黑色字体
var lightBgColors = []
if(lightBgColors.includes(this.baseColor)){
fontColor = "#000000"
}
//设置导航背景色和字体颜色
uni.setNavigationBarColor({
frontColor: fontColor,
backgroundColor: this.baseColor
})
}
}
}
4.其他UI组件
- 按钮组件：适配背景色
- 卡片组件：适配边框色
- 表格组件：适配边框色
- 开关组件：适配背景色