uniapp 切换语言功能及动态修改tabbar、顶部文字

最新推荐文章于 2025-11-25 17:52:37 发布

原创最新推荐文章于 2025-11-25 17:52:37 发布 · 3.7k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #vue

本文介绍了如何在uni-app项目中实现语言切换功能，包括安装vue-i18n，创建en.json和zh.json语言包，然后在main.js中导入并配置，最后在页面中使用并处理切换语言的事件，确保tabbar和顶部文字能够动态更新。

项目需求：中英切换

1.安装vue-i18n

npm install vue-i18n --save

2.创建语言包

文件目录
根据设计图随意翻译了下，这里就放图了不放代码了。

en.json:

在这里插入图片描述

zh.json:

在这里插入图片描述

3.在main.js中导入

import VueI18n from 'vue-i18n';

Vue.use(VueI18n)；

const i18n = new VueI18n({
	locale:'zh',  //默认语言
    messages: {
        zh: require("lang/zh.json"),
        en: require("lang/en.json")
    }
});

Vue.prototype._i18n = i18n

const app = new Vue({
	i18n,
    ...App
})

4.在页面中使用

computed:{
	i18n(){
		return this.$t('index');
	}
},
onShow() {},

切换语言的选择事件：

setLang(val){	
	if(val==0){
		//中
		console.log('zh')
		this._i18n.locale = 'zh';
		uni.setStorageSync('lang', 'zh');
		this.setTitle();   //这是用来动态更改tabbar文字的，没有需要的可以不用
		return;
	}
	if(val==1){
		//英
		console.log('en')
		this._i18n.locale = 'en';
		uni.setStorageSync('lang', 'en');
		this.setTitle();
		return;
	}
},

html中需要动态使用的地方：

<li>
	{{$t('My.AboutUs')}}
</li>

附上setTitle方法：

setTitle(){
	uni.setNavigationBarTitle({// 修改头部标题
		title: this.$i18n.messages[this.$i18n.locale].Tabbar.My
	});
	console.log(this.$i18n.locale)
	uni.setTabBarItem({// 修改底部导航
		index: 0,
		text: this.$i18n.messages[this.$i18n.locale].Tabbar.Moneybag
	});
	uni.setTabBarItem({// 修改底部导航
		index: 1,
		text: this.$i18n.messages[this.$i18n.locale].Tabbar.My
	});
},

结果：
在这里插入图片描述

那个帮助和反馈漏了写，整体功能是完全没有问题的。