uniapp主题切换功能的第一种实现方式(scss变量+vuex)

这篇具有很好参考价值的文章主要介绍了uniapp主题切换功能的第一种实现方式(scss变量+vuex)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

随着用户端体验的不断提升,很多应用在上线的时候都要求做不同的主题,最基本的就是白天与夜间主题。

就像b站app主题切换,像这样的

uniapp因为能轻松实现多端发布而得到很多开发者的青睐,但每个端的实现也有可能不同,现我把已实现的功能一点点的大家分享给大家,须要的可以参考一下,可扫码看效果。

那么用uniapp如何实现多主题切换呢?

第一种实现方式:CSS变量 + Vuex

第一步:创建store\index.js

创建store,用来保存不同的变量

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
const store = new Vuex.Store({
	state: {
        // 写上默认皮肤的数据
		skin: `
			--nav-bg:#42b983;
			--nav-color:#ffffff;
		`
	},
	getters: {
 
	},
	mutations: {
		// 皮肤更换
		skinPeeler(state,skin = []){
			// 将皮肤配置JSON转为以 ; 分割的字符串(style 值)
			let style = skin.map((item,index)=>{
				return `${item.name}:${item.value}`
			}).join(";");
			state.skin = style;
		}
	}
})
 
export default store

第二步:main.js中引入store

import Vue from 'vue'
import App from './App'

// 引用 Vuex 文件
import store from './store'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
	// 使用 Vuex
	store,
    ...App,
})
app.$mount()

第三步:页面使用

利用css变量来更新皮肤

<template>
	<view :style="skin">
		<view class="nav-bar">换肤示例</view>
		<view style="padding: 100rpx;">
			<button type="default" hover-class="none" class="btn">按钮 - 页面中的元素</button>
		</view>
		<view class="card">
			<view style="padding-bottom: 20rpx;">请选择皮肤风格</view>
			<radio-group @change="radioChange">
				<label class="h-flex-x list-item" v-for="(item, index) in items" :key="index">
					<view>
						<radio :value="index.toString()" :checked="index === current" />
					</view>
					<view style="padding-left: 30rpx;">{{item.name}}</view>
				</label>
			</radio-group>
		</view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				items: [
					{
						value: [
							{name:'--nav-bg',value:'#42b983'},
							{name:'--nav-color',value:'#ffffff'}
						],
						name: '默认'
					},
					{
						value: [
							{name:'--nav-bg',value:'#12b7f5'},
							{name:'--nav-color',value:'#333'}
						],
						name: '手机QQ'
					},
					{
						value: [
							{name:'--nav-bg',value:'#ff5500'},
							{name:'--nav-color',value:'#F0E0DC'}
						],
						name: '淘宝'
					},
				],
				current: 0
			}
		},
		computed: {
			skin() {
				return this.$store.state.skin;
			}
		},
		methods: {
			radioChange: function(e) {
				let item = this.items[Number(e.detail.value)].value;
				this.$store.commit("skinPeeler",item);

				// 动态设置导航条颜色
				uni.setNavigationBarColor({
					frontColor:'#ffffff',
					backgroundColor:item[0].value
				});
				
				// 动态设置tabbar样式
				uni.setTabBarStyle({
					backgroundColor:item[0].value,
					color: '#FFF',
					selectedColor: '#FFF',
					borderStyle: 'white'
				});
			}
		}
	}
</script>
 
<style lang="scss">
	page {
		background-color: #fff;
		font-size: 28rpx;
	}
	
	.h-flex-x{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
	}
	.card{
		background-color: var(--nav-bg);
		color:var(--nav-color);
		padding: 30rpx;
	}
	.list-item{
		height: 90rpx;
		border-top: var(--nav-color) solid 1px;
	}
 
	.nav-bar {
		box-sizing: content-box;
		height: 44px;
		background-color: var(--nav-bg);
		padding-top: var(--status-bar-height);
		color: var(--nav-color);
		line-height: 44px;
		text-align: center;
		font-size: 16px;
	}
 
	.btn {
		background-color: var(--nav-bg) !important;
		color: var(--nav-color) !important;
	}
</style>

最后总结

这就是主题切换的第一种实现

它的好处就是:能实时更换显示主题

但也有不足的地方

不足点:

  • 每个页面样式都维护着主题,耦合度高
  • 一套主题下实现不同页面区别化不方便
  • 增加变量后修改的地方多
  • ...... 更多不足大家补充

还有不懂的地方可以看b站视频:https://www.bilibili.com/video/BV1av4y1K74j/?p=18文章来源地址https://www.toymoban.com/news/detail-473259.html

到了这里,关于uniapp主题切换功能的第一种实现方式(scss变量+vuex)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp切换主题颜色(后台管理系统)

    需求:在现有已经做好的后台管理系统添加一个切换主题颜色的功能 分析:该项目用了很多uniapp的组件,css样式没有统一,类名也没有统一 使用混合mixin.scss,并使用vuex 效果图 功能:按钮背景颜色、部分样式、字体图标、分页跟随主题颜色变化也变化 每一个用户喜欢的主题

    2024年02月10日
    浏览(44)
  • (详解)vue中实现主题切换的三种方式

    目录 一、背景 二、实现思路  方法1:定义全局的CSS变量  方法2:切换已定义好的css文件  方法3:切换顶级CSS类名 (需使用css处理器,如sass、less等) 在我们开发中我们会遇到像是需要切换程序风格、 主题切换 啦这种应用场景。 参考大佬博客!!! vue中实现 ‘换肤 / 切换样

    2024年02月08日
    浏览(39)
  • 记录uniapp切换主题色能在抖音小程序上无效问题

    东西很简单,就是一个data-theme=\\\"light\\\"这种,就可以换不同的主题色 但是运行到抖音小程序无效,但是改成 class=“theme-light” 就可以,但是仅限于页面层级的,组件的也不行 不知道现在怎么回事,也不知道该咋改了 css html

    2024年02月09日
    浏览(46)
  • Vue项目如何配置、切换主题颜色(mixin + scss方式,简单高效)

    但图多 基本样式: 红色主题: 蓝色主题: 看到这里,是不是有人已经开始安耐不住了 ?😏 一. 首先,引入scss依赖(node-sass, sass-loader) 二.项目样式文件目录介绍 1.此处我将项目中的公共样式文件放到了 src/style目录下,其中 index.scss是以供全局使用的一些基本样式,在main

    2024年02月04日
    浏览(41)
  • Go For Web:踏入Web大门的第一步——Web 的工作方式

    本文作为解决如何通过 Golang 来编写 Web 应用这个问题的前瞻,对 Golang 中的 Web 基础部分进行一个简单的介绍。目前 Go 拥有成熟的 Http 处理包,所以我们去编写一个做任何事情的动态 Web 程序应该是很轻松的,接下来我们就去学习了解一些关于 Web 的相关基础,了解一些概念,

    2023年04月13日
    浏览(36)
  • 前端实现界面切换主题

    常用的主题切换实现方式之一,就是通过 link 标签的 rel 属性来实现的 当 rel 标签的值是 alternate ,就代表该样式是可以替换的 title 属性要加就全加上或者全不加,因为 title 会导致系统直接识别成样式文件,意思就是如果两个样式文件,第一个没有加该属性,第二个加了该属

    2024年02月08日
    浏览(38)
  • vue css变量实现多主题皮肤切换

    实现方式 多主题皮肤切换有很多种实现方式,可以用css预处理器实现,可以用js实现,其实最近简单的一种方式是用css变量(css variable)实现 单页面应用中,可以通过设置body的css变量爱控制整个系统的颜色,body添加一个属性my-theme,该属性值用来表示当前页面的主题皮肤,切换

    2024年02月06日
    浏览(47)
  • 利用less实现多主题切换(配合天气现象)

    1. 先看效果: 2. 话不多说直接撸吧: 原理:先给body元素添加style,再根据天气现象动态更改style 开撸: 创建src/assets/style/variables.less 使用 @XXX:var(–XXX,‘style’) 声明系列变量,之后添加其他变量直接增加即可(由于之后要配置颜色,默认值可以先给\\\" \\\") 也可以声明一下常用

    2024年02月09日
    浏览(36)
  • Vue2实现别踩白块(第一种)

    实际效果:可选模式 开始按钮 游戏界面 游戏失败(不点击任何黑块) 游戏中(点击黑块变灰色) 功能简介: 1、点击无尽模式,就是常规速度,定时器20毫秒,然后无限计分 2、急速模式,比常规快一倍,定时器8毫秒 3、计时模式,限时60秒,定时器20毫秒,计分 以上所有模

    2024年02月06日
    浏览(34)
  • 一种实现Spring动态数据源切换的方法

    不在现有查询代码逻辑上做任何改动,实现dao维度的数据源切换(即表维度) 节约bdp的集群资源。接入新的宽表时,通常uat验证后就会停止集群释放资源,在对应的查询服务器uat环境时需要查询的是生产库的表数据(uat库表因为bdp实时任务停止,没有数据落入),只进行服务

    2024年02月09日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包