uniapp 多语言 中文tabbar和导航栏 不生效
uniapp国际化多语言 已经设置完毕 但是tabbar和自定义导航栏按钮的文字不能切换中文,其他语言都能正常切换 唯独中文有这个问题,这是什么原因呢?
如下是在中文状态下:但是底下的tabbar和顶部按钮还是英文。
中文的json有配置
<template>
<view class="tab-block">
<ul
class='tab-list flex flex-center'
:class="showMiddleButton === true?'tab-list-middle':'tab-list-default'"
>
<li
v-for="(item, index) in tabList"
:class="'list-item flex flex-column flex-middle ' + item.middleClass"
@click="handlePush(item, index)"
:key="index"
>
<view class="item-img-box">
<image
class="item-img"
:src="tabIndex == index ? item.selectedIconPath : item.iconPath"
/>
</view>
<view class="item-text font-20 color-black"
:class="{ specialColor: tabIndex == index}"
>
{{item.text}}
</view>
</li>
</ul>
<!-- 兼容iPhonex下面的小黑条 -->
<view class="tab-bar" v-show="showTabBar === true"></view>
</view>
</template>
<script>
export default {
props: {
tabIndex: { //当前选中的tab项
type: Number,
default: 0
}
},
data() {
return {
/*
* iconPath: 默认icon图片路径
* selectedIconPath: 选中icon图片路径
* text: tab按钮文字
* pagePath:页面路径
* middleClass:该按钮所有的特殊样式类名
* tabList最小两项,最多五项
* tabList长度为奇数时,中间按钮才会突出显示
*
*/
tabList: [{
iconPath: '/static/tabbar/index.png',
selectedIconPath: "/static/tabbar/index_a.png",
text: '首页',
pagePath: '/pages/index/index',
middleClass: ''
},
{
iconPath: '/static/tabbar/activity.png',
selectedIconPath: '/static/tabbar/activity_a.png',
text: '活动',
pagePath: '/pages/activity/activity',
middleClass: ''
},
{
iconPath: '/static/tabbar/tabbar-logo.png',
selectedIconPath: '/static/tabbar/tabbar-logo.png',
text: '商城',
pagePath: '/pages/shop/shop',
middleClass: ''
},
{
iconPath: '/static/tabbar/shopCar.png',
selectedIconPath: '/static/tabbar/shopCar_a.png',
text: '购物车',
pagePath: '/pages/shopCar/shopCar',
middleClass: ''
},
{
iconPath: '/static/tabbar/mine.png',
selectedIconPath: '/static/tabbar/mine_a.png',
text: '我的',
pagePath: '/pages/mine/mine',
middleClass: ''
}
],
showTabBar: false,
showMiddleButton: false,
};
},
computed: {
getHeight() {
return Number(this.height);
},
},
mounted() {
this.getSystemInfo()
this.setTabBar()
},
methods: {
//判断中间按钮是否突出显示,奇数or偶数,奇数突出
setTabBar(){
let tabLength = this.tabList.length
if (tabLength % 2) {
debugger
this.showMiddleButton = true
// 向上取整
let middleIndex = Math.floor(tabLength / 2)
// 给中间的添加mid-button
this.tabList[middleIndex].middleClass = 'mid-button'
}
},
//点击按钮
handlePush(item, index) {
if (this.tabIndex !== index) {
uni.switchTab({
url: item.pagePath
})
}
},
//兼容iPhoneX以上底部黑线条的显示
getSystemInfo() {
//获取系统信息
uni.getSystemInfo({
success: (res) => {
// X及以上的异形屏top为44,非异形屏为20
if (res.safeArea.top > 20) {
this.showTabBar = true
}
}
});
},
}
}
</script>
<style lang="scss">
.specialColor{
color: rgb(229, 113, 1);
}
.flex {
display: flex;
flex-flow: row wrap;
}
.flex-center {
align-items: center;
justify-content: center;
}
.flex-column {
flex-direction: column;
}
.flex-middle {
align-items: center;
}
.font-20 {
font-size: 20rpx;
}
.tab-block {
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
background-size: contain;
width: 100vw;
.tab-list{
height:100rpx;
}
.tab-list-default{
background-color: #FFFFFF;
border-top: 1px #dddddd solid;
}
.tab-list-middle {
position: relative;
background: url('https://res.paquapp.com/popmartvip/home/nav_bar_bg_2x.png') no-repeat center center;
background-size: cover;
}
.list-item {
flex: 1;
.item-img-box {
width: 44rpx;
height: 42rpx;
margin-bottom: 9rpx;
position: relative;
}
.item-img {
width: 44rpx;
height: 42rpx;
}
}
.mid-button {
position: relative;
.item-img-box {
width: 106rpx;
height: 106rpx;
margin-bottom: 9rpx;
position: absolute;
z-index: 1002;
top: -104rpx;
}
.item-img {
width: 106rpx;
height: 106rpx;
}
.item-text {
font-size: 20rpx;
position: absolute;
z-index: 1002;
bottom: -40rpx;
}
}
.tab-bar {
height: 30rpx;
background-color: #FFFFFF;
}
}
</style>
请问解决了吗 我也是遇到这个问题 我在h5和小程序上都是生效的 但是在app上tabbar就不生效
可能是由于你的中文语言包未能正确地加载导致的。可以检查中文语言包是否已经正确导入并被识别。另外,你也可以尝试重新编译一下项目,确保中文语言包被正确地打包进去。