uniapp实现中英文切换

在这里插入图片描述
在这里插入图片描述
home.js

const data = {
    ZH: {
        content1: "苹果",
    },
    EN: {
        content1: “Apple”,
    }
}
export default data

index.js

import home from "./home.js"
export default {
    home
}

en.js

import part1 from './data/part1/index.js'
const en = {
	language: {
		name: "english"
	},
	part1: {
		home: {
			content1: part1.home.EN.content1,
		}
     }
}
export default en

zh.js

import part1 from './data/part1/index'
const zh = {
	language: {
		name: "中文"
	},
	part1: {
		home: {
			content1: part1.home.ZH.content1,
		},
	},
}
export default zh

使用

{{$t("part1.home.content1")}}

页面标题

onShow: function() {
			uni.hideHomeButton();
			if (this.$i18n.locale == 'en') {
				uni.setNavigationBarTitle({
					title: 'Home Page'
				});
			} else {
				uni.setNavigationBarTitle({
					title: '首页'
				});
			}
		},

main.js

import ZH from '@/language/zh.js'  //中文最终汇总暴露的信息
import EN from '@/language/en.js'  //英文
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
  // localStorage.getItem('languageSet') || 'zh'
  locale: 'zh',   //从localStorage里获取用户中英文选择,没有则默认中文
  messages: {
    'zh': ZH,
    'en': EN
  }
})

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

使用

<u-button size="medium" type='primary' @click="chagelanguage">{{ language }}</u-button>

chagelanguage() {
				this.$i18n.locale == 'zh' ? this.$i18n.locale = 'en' : this.$i18n.locale = 'zh' //设置中英文模式
				if (this.$i18n.locale === 'zh') {
					this.language = "en"
					uni.setNavigationBarTitle({
						title: '首页'
					});
					uni.setTabBarItem({
						index: 0,
						text: '首页',
					})
					uni.setTabBarItem({
						index: 1,
						text: '我的',
					})
				} else {
					this.language = "zh"
					uni.setNavigationBarTitle({
						title: 'Home Page'
					});
					uni.setTabBarItem({
						index: 0,
						text: 'Home Page',
					})
					uni.setTabBarItem({
						index: 1,
						text: 'User',
					})

				}
			},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/919020.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

go-zero(七) RPC服务和ETCD

go-zero 实现 RPC 服务 在实际的开发中&#xff0c;我们是通过RPC来传递数据的&#xff0c;下面我将通过一个简单的示例&#xff0c;说明如何使用go-zero框架和 Protocol Buffers 定义 RPC 服务。 一、生成 RPC项目 在这个教程中&#xff0c;我们根据user.api文件&#xff0…

C#.Net筑基-字符串超全总结

字符串是日常编码中最常用的引用类型了&#xff0c;可能没有之一&#xff0c;加上字符串的不可变性、驻留性&#xff0c;很容易产生性能问题&#xff0c;因此必须全面了解一下。 01、字符与字符编码 1.1、字符Char 字符 char 表示为 Unicode字符&#xff0c;在C#中用 UTF-16 …

ROS Action

在 ROS 中&#xff0c;Action 是一种支持长时间异步任务的通信机制。与 Service 不同&#xff0c;Action 允许客户端发起一个请求&#xff0c;并在任务执行的过程中不断接收反馈&#xff0c;直到任务完成。这种机制非常适用于可能需要较长时间来完成的任务&#xff0c;比如机器…

23.UE5删除存档

2-25 删除存档制作_哔哩哔哩_bilibili 按照自己的风格制作删除按钮 这样该行的存档就被从存档列表中删除了&#xff0c;并且实际存档&#xff08;我的存档蓝图&#xff09;中也被删除了 但是存在一个问题&#xff0c;如果存档数据中存在索引为: 0 1 2 3的存档&#xff0c;当索…

LoFTR: Detector-Free Local Feature Matching with Transformers—特征点匹配算法系列

LoFTR: Detector-Free Local Feature Matching with Transformers 受到&#xff1a;受到开创性作品 SuperGlue 的启发 摘要总结&#xff1a; 提出了一种局部图像特征匹配的新方法。更为突出说明的是室内场景下的特征点的匹配问题。 不是依次执行图像特征检测、描述和匹配&#…

图像基础算法学习笔记

目录 概要 一、图像采集 二、图像标注 四、图像几何变换 五、图像边缘检测 Sobel算子 Scharrt算子 Laplacian算子 Canny边缘检测 六、形态学转换 概要 参考书籍&#xff1a;《机器视觉与人工智能应用开发技术》 廖建尚&#xff0c;钟君柳 出版时间&#xff1a;2024-…

排序算法 -归并排序

文章目录 1. 归并排序&#xff08;Merge Sort&#xff09;1.1 简介1.2 归并排序的步骤1.3 归并排序c 语言实现代码说明 1.4 时间复杂度1.5 空间复杂度1.6 动画 1. 归并排序&#xff08;Merge Sort&#xff09; 1.1 简介 归并排序&#xff08;Merge Sort&#xff09;是一种基于…

wireshark 基础

wireshark 基础 一、wireshark介绍 Wireshark&#xff08;前称Ethereal&#xff09;是一个网络封包分析软件。网络封包分析软件的功能是捕获网络封包&#xff0c;并尽可能显示出最为详细的网络封包资料。Wireshark使用WinPCAP作为接口&#xff0c;直接与网卡进行数据报文交换…

GIT 入门详解指南

前言&#xff1a; 注&#xff1a;本博客仅用于记录本人学习过程中对git的理解&#xff0c;仅供学习参考&#xff0c;如有异议请自行查资料求证 安装 使用git之前必须完成git的安装&#xff0c;Git 目前支持 Linux/Unix、Solaris、Mac和 Windows 平台上运行 git 安装教程 基本…

从 IDC 到云原生:稳定性提升 100%,成本下降 50%,热联集团的数字化转型与未来展望

作者&#xff1a;金峰&#xff08;项良&#xff09;、朱永林、赵世振&#xff08;寰奕&#xff09; 公司简介 杭州热联集团股份有限公司成立于 1997 年 10 月&#xff0c;是隶属杭州市实业投资集团的国有控股公司。公司专业从事国际、国内钢铁贸易黑色大宗商品及产业服务&…

【微软:多模态基础模型】(4)统一视觉模型

欢迎关注[【youcans的AGI学习笔记】](https://blog.csdn.net/youcans/category_12244543.html&#xff09;原创作品 【微软&#xff1a;多模态基础模型】&#xff08;1&#xff09;从专家到通用助手 【微软&#xff1a;多模态基础模型】&#xff08;2&#xff09;视觉理解 【微…

机器学习——期末复习 重点题归纳

第一题 问题描述 现有如下数据样本&#xff1a; 编号色泽敲声甜度好瓜1乌黑浊响高是2浅白沉闷低否3青绿清脆中是4浅白浊响低否 &#xff08;1&#xff09;根据上表&#xff0c;给出属于对应假设空间的3个不同假设。若某种算法的归纳偏好为“适应情形尽可能少”&#xff0c;…

Web3浪潮下的区块链应用:从理论到实践的全面解析

随着Web3的兴起&#xff0c;区块链技术作为其核心支撑&#xff0c;正迎来前所未有的应用爆发。Web3不仅仅是技术的革新&#xff0c;更代表了一种去中心化、开放、透明的互联网愿景。在这一背景下&#xff0c;区块链技术的应用正从理论走向实践&#xff0c;推动着各行各业的数字…

学习大数据DAY61 宽表加工

目录 模型设计 加工宽表 任务调度&#xff1a; 大表 - 把很多数据整合起来 方便后续的明细查询和指标计算 模型设计 设计 建模 设计: excel 文档去编写 建模: 使用建模工具 PowerDesigner Navicat 在线画图工具... 把表结构给绘 制出来 共享\项目课工具\pd 加工宽表 数…

ChromeDriver驱动下载地址更新(保持最新最全)

说明&#xff1a; ChromeDriver 是 Selenium WebDriver 用于控制 Chrome 的独立可执行文件。 为了方便下载使用&#xff0c;本文保持ChromeDriver的最新版本更新&#xff0c;并提供115.0.5763.0-133.0.6841.0版本的下载地址&#xff1a; 所有版本和下载地址&#xff1a; &am…

QT基本绘图

QT绘图 1.概述 这篇文章介绍如何绘图 2.绘图基本操作 创建一个普通的widget类型的项目 在widget.h 文件中重写绘图事件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : p…

[ACTF2020]Upload 1--详细解析

信息收集 题目告诉我们是一道upload&#xff0c;也就是文件上传漏洞题目。 进入界面&#xff0c;是一个灯泡&#xff0c;将鼠标放在图标上就会出现文件上传的相应位置&#xff1a; 思路 文件上传漏洞&#xff0c;先看看有没有前端校验。 在js源码中找到了前端校验&#xff…

Android Studio开发学习(五)———LinearLayout(线性布局)

一、布局 认识了解一下Android中的布局&#xff0c;分别是: LinearLayout(线性布局)&#xff0c;RelativeLayout(相对布局)&#xff0c;TableLayout(表格布局)&#xff0c; FrameLayout(帧布局)&#xff0c;AbsoluteLayout(绝对布局)&#xff0c;GridLayout(网格布局) 等。 二、…

计算机视觉在自动驾驶汽车中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 计算机视觉在自动驾驶汽车中的应用 计算机视觉在自动驾驶汽车中的应用 计算机视觉在自动驾驶汽车中的应用 引言 计算机视觉在自动…

表格的选择弹窗,选中后返显到表格中

项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 表格的下拉框可以直接显示选项&#xff0c;那如果选择框不是下拉的&#xff0c;而是弹窗&#xff0c;那么在表格中如何返显呢&#xff1f; 问题描述 如上图所示&#xff0c;点击表格中的选择&#xf…