uniapp国际化翻转，动态修改整体样式

静态的翻转

只需要在app.vue的style添加如下样式

page {
	direction: rtl;
}

动态修改整体样式

阿拉伯语需要右翻转，uniapp设置全局样式还挺麻烦

1.设置全局语言

setLocal，store，storage，globalData都可以

2.创建混入文件

import appConfig from "../store/appConfig"

export default {
	onShow() {
        // 这个方法官网查不到，误打误撞试出来的，Hbuilder低版本不一定可用
		uni.setPageMeta({
            // 以字符串形式配置页面根节点样式
			pageStyle: `direction:${appConfig.state.lang=='ar'?'rtl':'ltr'}`
		})
        // 应该也可以写在watch里
        uni.setTabBarItem({
			index: 0,
			text: this.t('sy'),
		})
		uni.setTabBarItem({
			index: 1,
			text: this.t('fl')
		})
		uni.setTabBarItem({
			index: 2,
			text: this.t('kf')
		})
		uni.setTabBarItem({
			index: 3,
			text: this.t('gwc')
		})
		uni.setTabBarItem({
			index: 4,
			text: this.t('wd')
		})
	}
}

3.引入混入

在main.js里引入并配置 即可实现动态全局翻转的样式了

import mixin from './tool/mixin.js'
Vue.mixin(mixin)