uniApp——切换全局主题

1. uni.scss

$white: #FFFFFF;
$dark: #000000;

.light {
	background: $dark;
	color: $white;
}
.dark {
	background: $white;
	color: $dark;
}

2. store

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		vuex_theme: uni.getStorageSync('vuex_theme') ? uni.getStorageSync('vuex_theme') : 'light'
	},
	mutations: {
		changeTheme(state, theme) {
			state.vuex_theme = theme;
			uni.setStorageSync('vuex_theme', theme);
		}
	}
})

export default store

3. main.js

import store from '@/store/index'
const app = new Vue({
	...App,
	store
})

4. index

> 直接在页面中使用
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
UniApp 中,你可以通过在页面之间切换时应用不同的切换动画效果来增加用户体验。UniApp 提供了两种切换动画的方式: 1. 使用内置的动画效果:UniApp 内置了一些常用的切换动画效果,你可以在页面配置文件(`pages.json`)中指定 `animationType` 和 `animationDuration` 属性来设置页面切换时的动画效果和持续时间。例如: ```json { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页", "app-plus": { "animationType": "slide-in-right", "animationDuration": 300 } } } ``` 上述代码中,指定了页面切换时使用的动画效果为右滑进入,并且持续时间为 300 毫秒。 2. 自定义动画效果:如果内置的动画效果不能满足你的需求,你还可以使用自定义动画来实现页面切换时的特殊效果。UniApp 提供了 `uni-transition` 组件来支持自定义动画效果。你可以在页面模板中使用 `uni-transition` 组件,并设置 `name` 属性来指定自定义的动画效果。例如: ```html <template> <view> <uni-transition name="fade"> <!-- 页面内容 --> </uni-transition> </view> </template> ``` 上述代码中,使用了名为 "fade" 的自定义动画效果。 除了以上两种方式,你还可以使用 CSS3 的动画属性和过渡效果来实现更复杂的切换动画效果。UniApp 支持在页面样式文件中使用 CSS3 的动画属性和过渡效果来定义页面切换时的动画效果。例如: ```css page { animation: my-animation 0.3s; } @keyframes my-animation { from { /* 起始状态 */ } to { /* 结束状态 */ } } ``` 以上是一些在 UniApp 中实现页面切换动画的方式,你可以根据自己的需求选择合适的方法来应用动画效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值