devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

html-css-js移动端导航栏底部固定+i18n国际化全局_移动端 底部导航插件

作者：你好赵伟 | 2024-02-11 20:46:16

赞

踩

移动端 底部导航插件

需求：要做一个移动端的仿照小程序的导航栏页面操作，但是这边加上了i18n国家化，由于页面切换的时候会导致国际化失效，所以写了这篇文章

1.效果

切换页面的时候中英文也会跟着改变，不会导致切换后回到默认的语言

2.实现

首先下载插件jquery-i18n-properties

下载这个压缩后的js文件即可

这个文件还需要jquery.js的支持code.jquery.com/jquery-3.7.1.min.js

 新建jquery-3.7.1.min.js文件之后把这个网页全部复制粘贴进去就行了。 

 2.1创建i18n文件夹，并且创建language.js和不同语言文件

其中js.properties是默认语言文件，us是英语，tw是中文

主要中英文切换代码如下，写在language.js里面，用法在后面

  1. /* 网站支持的语言种类 */
  2. const webLanguage = ['tw', 'us']
  3.  
  4. /* i18nLanguage = "tw" 设置默认繁体 */
  5. const i18nExecute = (i18nLanguage = "tw") => {
  6.     console.log(i18nLanguage, '走哪了');
  7.     if ($.i18n == undefined) return false
  8.     $.i18n.properties({
  9.         name: "js", //资源文件名称
  10.         path: '/i18n/lang/', //资源文件路径
  11.         mode: 'map', //用Map的方式使用资源文件中的值
  12.         language: i18nLanguage,
  13.         callback: function () {
  14.             /* 替换普通文本 */
  15.             $("[i18n]").each(function () {
  16.                 $(this).html($.i18n.prop($(this).attr("i18n")))
  17.             })
  18.             /* 替换value属性 */
  19.             $("[i18n-v]").each(function () {
  20.                 $(this).val($.i18n.prop($(this).attr("i18n-v")))
  21.             })
  22.             /* 替换placeholder属性 */
  23.             $("[i18n-p]").each(function () {
  24.                 $(this).attr("placeholder", $.i18n.prop($(this).attr("i18n-p")))
  25.             })
  26.         }
  27.     });
  28. }
  29.  
  30. /* 获取文本 */
  31. const i18nProp = function (value) {
  32.     if ($.i18n == undefined) return false
  33.     return $.i18n.prop(value)
  34. }
  35.  
  36. $(function () {
  37.     i18nExecute()
  38. })

内容如下 ，这边我写了俩个测试的中英文版

 

2.2编写页面内容

注意！！jquery.js一定要在这俩个插件的前面，不然报错

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <link rel="stylesheet" type="text/css" href="./pulice.css" />
  9.   </head>
  10.   <body>
  11.     <div class="box">
  12.       <span i18n="password"></span>
  13.       <button onclick="i18nToggel()">中英文切换</button>
  14.       <div class="tabbar">
  15.         <a href="home.html" class="tab">
  16.           <span>首页</span>
  17.         </a>
  18.         <a href="02.html" class="tab">
  19.           <span>用户</span>
  20.         </a>
  21.       </div>
  22.     </div>
  23.     <script src="./jquery-3.2.1.min.js"></script>
  24.     <script src="./i18n/jquery.i18n.properties-min.js"></script>
  25.     <script src="./i18n/language.js"></script>
  26.   </body>
  27. </html>

确实是实现了 

2.3language的完整代码如下

  1. /* 网站支持的语言种类 */
  2. const webLanguage = ['tw', 'us']
  3.  
  4. /* i18nLanguage = "tw" 设置默认繁体 */
  5. const i18nExecute = (i18nLanguage = "tw") => {
  6.     console.log(i18nLanguage, '走哪了');
  7.     if ($.i18n == undefined) return false
  8.     $.i18n.properties({
  9.         name: "js", //资源文件名称
  10.         path: '/i18n/lang/', //资源文件路径
  11.         mode: 'map', //用Map的方式使用资源文件中的值
  12.         language: i18nLanguage,
  13.         callback: function () {
  14.             /* 替换普通文本 */
  15.             $("[i18n]").each(function () {
  16.                 $(this).html($.i18n.prop($(this).attr("i18n")))
  17.             })
  18.             /* 替换value属性 */
  19.             $("[i18n-v]").each(function () {
  20.                 $(this).val($.i18n.prop($(this).attr("i18n-v")))
  21.             })
  22.             /* 替换placeholder属性 */
  23.             $("[i18n-p]").each(function () {
  24.                 $(this).attr("placeholder", $.i18n.prop($(this).attr("i18n-p")))
  25.             })
  26.         }
  27.     });
  28. }
  29.  
  30. /* 获取文本 */
  31. const i18nProp = function (value) {
  32.     if ($.i18n == undefined) return false
  33.     return $.i18n.prop(value)
  34. }
  35.  
  36. // 中英文切换
  37. let flagI18n = false;
  38. function i18nToggel() {
  39.     flagI18n = !flagI18n;
  40.     console.log(flagI18n)
  41.     localStorage.setItem('i18n', JSON.stringify(flagI18n))
  42.     if (flagI18n) {
  43.         i18nExecute('us')
  44.     } else {
  45.         i18nExecute('tw')
  46.     }
  47. }
  48. let i18n = ''
  49. // 解决刷新后数据回到默认语言问题
  50. function query() {
  51.     if (localStorage.key('i18n')) {
  52.         i18n = JSON.parse(localStorage.getItem('i18n'))
  53.         flagI18n = i18n;
  54.         if (i18n) {
  55.             console.log('ces111');
  56.             i18nExecute('us')
  57.         } else {
  58.             console.log('ces22');
  59.             i18nExecute('tw')
  60.         }
  61.     }
  62.  
  63. }
  64. query();
  65. function routerHref(item) {
  66.     console.log(flagI18n, '怎么搞成永久的');
  67.  
  68. }
  69.

2.4底部固定导航栏的css样式如下

  1. html,
  2. body {
  3.   width: 100%;
  4.   height: 100%;
  5. }
  6. * {
  7.   padding: 0px;
  8.   margin: 0px;
  9. }
  10. .box {
  11.   height: 100%;
  12.   width: 99%;
  13.   border: 1px solid red;
  14. }
  15. .tabbar {
  16.   height: 50px;
  17.   display: flex;
  18.   justify-content: space-evenly;
  19.   align-items: center;
  20.   box-sizing: border-box;
  21.   padding: 10px;
  22.   background-color: #e2dfdf;
  23.   width: 100%;
  24.   position: fixed;
  25.   z-index: 1000;
  26.   left: 0;
  27.   bottom: 0;
  28. }

ps：如果是原生写的要打包成app需要后端使用nginx进行配置，并且前端不需要再写端口和域名这些，后端发的端口域名仅作为调试使用，线上直接用手机上的默认端口域名去请求就可以了请求如下

  1. let serveUrl = '/index/login'
  2. axios.post(serveUrl).then(res=>{})

文章到此结束希望对你有所帮助~

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/76886
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号