MUI框架-12-使用原生底部选项卡（凸出图标案例）

水深无声 2022-04-18 01:44 690阅读 0赞

MUI框架-12-使用原生底部选项卡（凸出图标案例）

今天，用 mui 做 app 时，遇到了可能各位都遇到过的头疼问题：底部中间图标凸起，如下图：
在这里插入图片描述

最后有源代码

【提示】：有人问我在 HBuilder 中看不到底部栏，请不要慌，代码没有问题，在模拟器或者真机运行才会有，原生，原生。

1、mainifest.json代码修改如下，主要就是将官方 mui tab 底部凸起案例的字体图标换成了图片：

  1. "launchwebview": {
  2.      "bottom": "0px",
  3.      "background": "#fff",
  4.      "subNViews": [
  5.      {
  6.      "id": "tabBar",
  7.      "styles": {
  8.      "bottom": "0px",
  9.      "left": "0",
  10.      "height": "50px",
  11.      "width": "100%",
  12.      "backgroundColor": "#fff"
  13.      },
  14.      "tags": [
  15.      {
  16.      "tag": "img",
  17.      "id": "homeIcon",
  18.      "src": "images/home_nor.png",
  19.      "position": {
  20.      "top": "4px",
  21.      "left": "10%",
  22.      "width": "25px",
  23.      "height": "40px"
  24.      }
  25.      },{
  26.      "tag": "img",
  27.      "id": "scheduleIcon",
  28.      "src": "images/schedule_nor.png",
  29.      "position": {
  30.      "top": "4px",
  31.      "left": "30%",
  32.      "width": "25px",
  33.      "height": "40px"
  34.      }
  35.      },{
  36.      "tag": "img",
  37.      "id": "goodsIcon",
  38.      "src": "images/goods_nor.png",
  39.      "position": {
  40.      "top": "4px",
  41.      "left": "65%",
  42.      "width": "25px",
  43.      "height": "40px"
  44.      }
  45.      },{
  46.      "tag": "img",
  47.      "id": "mineIcon",
  48.      "src": "images/mine_nor.png",
  49.      "position": {
  50.      "top": "4px",
  51.      "left": "85%",
  52.      "width": "25px",
  53.      "height": "40px"
  54.      }
  55.      }
  56.      ]
  57.      }
  58.      ]
  59.     }

2、util.js代码修改如下（主要将字体颜色配置都换成了图片，并且将subpages变成了对象数组，增加了id和url字段，这样更加符合实际需求，新增了首页，并且初始化显示第一页）：

  1. var util = {
  2.      options: {
  3.      ACTIVE_SRC1: "images/home_click.png",
  4.      NORMAL_SRC1: "images/home_nor.png",
  5.      ACTIVE_SRC2: "images/schedule_click.png",
  6.      NORMAL_SRC2: "images/schedule_nor.png",
  7.      ACTIVE_SRC3: "images/goods_click.png",
  8.      NORMAL_SRC3: "images/goods_nor.png",
  9.      ACTIVE_SRC4: "images/mine_click.png",
  10.      NORMAL_SRC4: "images/mine_nor.png",
  11.      subpages: [{
  12.      url : 'pages/home.html',
  13.      id : 'home'
  14.      },{
  15.      url : 'pages/schedule.html',
  16.      id : 'schedule'
  17.      },{
  18.      url : 'pages/goods.html',
  19.      id : 'goods'
  20.      },{
  21.      url : 'pages/mine.html',
  22.      id : 'mine'
  23.      },]
  24.      },
  25.      /**
  26.       *  简单封装了绘制原生view控件的方法
  27.       *  绘制内容支持font（文本，字体图标）,图片img , 矩形区域rect
  28.       */
  29.      drawNative: function(id, styles, tags) {
  30.      var view = new plus.nativeObj.View(id, styles, tags);
  31.      return view;
  32.      },
  33.      /**
  34.       * 初始化首个tab窗口 和 创建子webview窗口
  35.       */
  36.      initSubpage: function(aniShow) {
  37.      var subpage_style = {
  38.      top: 0,
  39.      bottom: 51
  40.      },
  41.      subpages = util.options.subpages,
  42.      self = plus.webview.currentWebview(),
  43.      temp = {};
  44.      //兼容安卓上添加titleNView 和 设置沉浸式模式会遮盖子webview内容
  45.      if(mui.os.android) {
  46.      if(plus.navigator.isImmersedStatusbar()) {
  47.      subpage_style.top += plus.navigator.getStatusbarHeight();
  48.      }
  49.      if(self.getTitleNView()) {
  50.      subpage_style.top += 40;
  51.      }
  52.      }
  54.      // 初始化第一个tab项为首次显示
  55.      temp[self.id] = "true";
  56.      mui.extend(aniShow, temp);
  58.      // 初始化绘制首个tab按钮
  59.      util.toggleNview(0);
  61.      //预加载所有子页面
  62.      for(var i = 0, len = subpages.length; i < len; i++) {
  63.      if(!plus.webview.getWebviewById(subpages[i].id)) {
  64.      var sub = plus.webview.create(subpages[i].url, subpages[i].id, subpage_style);
  65.      //初始化隐藏
  66.      sub.hide();
  67.      // append到当前父webview
  68.      self.append(sub);
  69.      }
  70.      }
  72.      //初始化显示第一个子页面
  73.      plus.webview.show(plus.webview.getWebviewById(subpages[0].id));
  75.      },
  76.      /**
  77.       * 点击切换tab窗口
  78.       */
  79.      changeSubpage: function(targetPage, activePage, aniShow) {
  80.      //若为iOS平台或非首次显示，则直接显示
  81.      if(mui.os.ios || aniShow[targetPage]) {
  82.      plus.webview.show(targetPage);
  83.      } else {
  84.      //否则，使用fade-in动画，且保存变量
  85.      var temp = {};
  86.      temp[targetPage] = "true";
  87.      mui.extend(aniShow, temp);
  88.      plus.webview.show(targetPage, "fade-in", 300);
  89.      }
  90.      //隐藏当前 除了第一个父窗口
  91.      if(activePage !== plus.webview.getLaunchWebview()) {
  92.      plus.webview.hide(activePage);
  93.      }
  94.      },
  95.      /**
  96.       * 点击重绘底部tab （view控件）
  97.       */
  98.      toggleNview: function(currIndex) {
  99.      // 重绘当前tag 包括icon和text，所以执行两个重绘操作
  100.      switch(currIndex){
  101.      case 0 :
  102.      util.updateSubNView(0, util.options.ACTIVE_SRC1);
  103.      util.updateSubNView(1, util.options.NORMAL_SRC2);
  104.      util.updateSubNView(2, util.options.NORMAL_SRC3);
  105.      util.updateSubNView(3, util.options.NORMAL_SRC4);
  106.      break;
  107.      case 1 :
  108.      util.updateSubNView(0, util.options.NORMAL_SRC1);
  109.      util.updateSubNView(1, util.options.ACTIVE_SRC2);
  110.      util.updateSubNView(2, util.options.NORMAL_SRC3);
  111.      util.updateSubNView(3, util.options.NORMAL_SRC4);
  112.      break;
  113.      case 2 :
  114.      util.updateSubNView(0, util.options.NORMAL_SRC1);
  115.      util.updateSubNView(1, util.options.NORMAL_SRC2);
  116.      util.updateSubNView(2, util.options.ACTIVE_SRC3);
  117.      util.updateSubNView(3, util.options.NORMAL_SRC4);
  118.      break;
  119.      case 3 :
  120.      util.updateSubNView(0, util.options.NORMAL_SRC1);
  121.      util.updateSubNView(1, util.options.NORMAL_SRC2);
  122.      util.updateSubNView(2, util.options.NORMAL_SRC3);
  123.      util.updateSubNView(3, util.options.ACTIVE_SRC4);
  124.      break;
  125.      }
  126.      },
  127.      /*
  128.       * 利用 plus.nativeObj.View 提供的 drawBitmap 方法更新 view 控件
  129.       */
  130.      updateSubNView: function(currIndex, src) {
  131.      var self = plus.webview.currentWebview(),
  132.      nviewEvent = plus.nativeObj.View.getViewById("tabBar"), // 获取nview控件对象
  133.      nviewObj = self.getStyle().subNViews[0], // 获取nview对象的属性
  134.      currTag = nviewObj.tags[currIndex]; // 获取当前需重绘的tag
  135.      nviewEvent.drawBitmap(src,'',currTag.position, currTag.id);
  136.      }
  137.     };

3、index.html代码修改如下(主要将中间凸起的效果有原来的字体图标改成了图片)：

  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7.         <title>首页</title>
  8.         <script src="js/mui.min.js"></script>
  9.         <link href="css/mui.min.css" rel="stylesheet" />
  10.         <style>
  11.             html,
  12.             body {
  13.                 background-color: #efeff4;
  14.             }
  16.             .title {
  17.                 margin: 20px 15px 10px;
  18.                 color: #6d6d72;
  19.                 font-size: 15px;
  20.                 padding-bottom: 51px;
  21.             }
  22.         </style>
  23.     </head>
  25.     <body>
  26.         <script src="js/util.js"></script>
  27.         <script type="text/javascript">
  28.             (function() {
  29.                 mui.init({
  30.                     swipeBack: true //启用右滑关闭功能
  31.                 });
  32.                 mui.plusReady(function() {
  33.                     var self = plus.webview.currentWebview(),
  34.                         leftPos = Math.ceil((window.innerWidth - 60) / 2); // 设置凸起大图标为水平居中
  35.                     /**
  36.                      * drawNativeIcon 绘制凸起圆，
  37.                      * 实现原理：
  38.                      *   id为bg的tag 创建带边框的圆
  39.                      *   id为bg2的tag 创建白色矩形遮住圆下半部分，只显示凸起带边框部分
  40.                      *   id为iconBg的红色背景图
  41.                      *   id为icon的字体图标
  42.                      *   注意创建先后顺序，创建越晚的层级越高
  43.                      */
  44.                     var drawNativeIcon = util.drawNative('icon', {
  45.                         bottom: '5px',
  46.                         left: leftPos + 'px',
  47.                         width: '60px',
  48.                         height: '60px'
  49.                     }, [{
  50.                         tag: 'rect',
  51.                         id: 'bg',
  52.                         position: {
  53.                             top: '1px',
  54.                             left: '0px',
  55.                             width: '100%',
  56.                             height: '100%'
  57.                         },
  58.                         rectStyles: {
  59.                             color: '#fff',
  60.                             radius: '50%',
  61.                             borderColor: '#ccc',
  62.                             borderWidth: '1px'
  63.                         }
  64.                     }, {
  65.                         tag: 'rect',
  66.                         id: 'bg2',
  67.                         position: {
  68.                             bottom: '-0.5px',
  69.                             left: '0px',
  70.                             width: '100%',
  71.                             height: '45px'
  72.                         },
  73.                         rectStyles: {
  74.                             color: '#fff'
  75.                         }
  76.                     }, {
  77.                         tag: 'rect',
  78.                         id: 'iconBg',
  79.                         position: {
  80.                             top: '5px',
  81.                             left: '5px',
  82.                             width: '50px',
  83.                             height: '50px'
  84.                         },
  85.                         rectStyles: {
  86.                             color: '#0ab88e',
  87.                             radius: '50%'
  88.                         }
  89.                     }, {
  90.                         tag: 'img',
  91.                         id: 'icon',
  92.                         position: {
  93.                             top: '15px',
  94.                             left: '15px',
  95.                             width: '30px',
  96.                             height: '30px'
  97.                         },
  98.                         src: 'images/icon_scan.png'
  99.                     }]);
  100.                     // 将绘制的凸起 append 到父webview中
  101.                     self.append(drawNativeIcon);
  103.                     //凸起圆的点击事件
  104.                     var active_color = '#fff';
  105.                     drawNativeIcon.addEventListener('click', function(e) {
  106.                         mui.openWindow({
  107.                             id: 'scan',
  108.                             url: 'pages/scan.html'
  109.                         })
  110.                     });
  111.                     // 中间凸起图标绘制及监听点击 完毕
  113.                     // 创建子webview窗口 并初始化
  114.                     var aniShow = {};
  115.                     util.initSubpage(aniShow);
  117.                     //初始化相关参数
  118.                     var nview = plus.nativeObj.View.getViewById('tabBar'),
  119.                         activePage = plus.webview.currentWebview(),
  120.                         targetPage,
  121.                         subpages = util.options.subpages,
  122.                         pageW = window.innerWidth,
  123.                         currIndex = 0;
  125.                     /**
  126.                      * 根据判断view控件点击位置判断切换的tab
  127.                      */
  128.                     nview.addEventListener('click', function(e) {
  129.                         var clientX = e.clientX;
  130.                         if(clientX >= 0 && clientX <= parseInt(pageW * 0.25)) {
  131.                             currIndex = 0;
  132.                         } else if(clientX > parseInt(pageW * 0.25) && clientX <= parseInt(pageW * 0.45)) {
  133.                             currIndex = 1;
  134.                         } else if(clientX > parseInt(pageW * 0.45) && clientX <= parseInt(pageW * 0.8)) {
  135.                             currIndex = 2;
  136.                         } else {
  137.                             currIndex = 3;
  138.                         }
  139.                         // 匹配对应tab窗口
  140.                         if(plus.webview.getWebviewById(subpages[currIndex].id) == plus.webview.currentWebview()) {
  141.                             return;
  142.                         } else {
  143.                             targetPage = plus.webview.getWebviewById(subpages[currIndex].id);
  144.                         }
  146.                         //底部选项卡切换
  147.                         util.toggleNview(currIndex);
  148.                         // 子页面切换
  149.                         util.changeSubpage(targetPage, activePage, aniShow);
  150.                         //更新当前活跃的页面
  151.                         activePage = targetPage;
  153.                     });
  154.                 });
  155.             })();
  156.         </script>
  157.     </body>
  159. </html>

源码下载地址：

  • 地址：https://download.csdn.net/download/qq_40147863/10768519

更多文章：

  • 博客园：MUI 框架
  • CSDN：MUI 框架

发表评论

表情：
评论列表 （有 0 条评论，690人围观）

还没有评论，来说两句吧...

相关阅读

    相关 MUI实现侧方选项卡功能

    引言 对于线上行业而言，分类栏目可以帮助我们快速找到所需要的商品或文章等。而现在实现这种分类效果的大多数以侧方选项卡的形式来实现，所以掌握该技能可以大大的提高平时的开...

    迈不过友情╰迈不过友情╰/ 0 赞/ 147 阅读

    相关 MUI底部二级菜单

    引言 底部二级菜单，笔者在原生的APP很少看到该功能，而在微信公众号倒是挺常见的，不过既然在MUI中看到此技巧，那笔者就在此记录一下方便自己日后查阅，同时也希望可以帮...

    我就是我我就是我/ 0 赞/ 156 阅读

    相关 mui底部导航

    在网上找了一个mui的底部导航，用起来还不错，但是已经找不到出处了。 修改了一下之后，原谅我厚脸皮的发个原创了。 用的是自定义的图标，如果不会，可以在我的博客里面找找 !

    ﹏ヽ暗。殇╰゛Y﹏ヽ暗。殇╰゛Y/ 0 赞/ 424 阅读