mui底部导航切换

mui底部导航切换

本篇笔记主要分享mui框架下底部导航菜单的切换。其实关于底部导航菜单的切换在网上有很多教程。那么波波为啥还要再分享一下呢？原因其实很简单，别人分享的不好用。

首先我们看mui底部导航的html部分代码，大家也可以用mT来一键生成（仅hbuilder中有效）。

  1. <nav class="mui-bar mui-bar-tab">
  2.             <a class="mui-tab-item mui-active" href="index.html" target="_self">
  3.                 <span class="mui-icon mui-icon-home"></span>
  4.                 <span class="mui-tab-label">首页</span>
  5.             </a>
  6.             <a class="mui-tab-item" href="square.html" target="_self">
  7.                 <span class="mui-icon iconfont iconfenleiorguangchangorqita"></span>
  8.                 <span class="mui-tab-label">广场</span>
  9.             </a>
  10.             <a class="mui-tab-item"  href="reading.html" target="_self">
  11.                 <span class="mui-icon iconfont icontushu"></span>
  12.                 <span class="mui-tab-label">读书</span>
  13.             </a>
  14.             <a class="mui-tab-item" href="ucenter.html" target="_self">
  15.                 <span class="mui-icon iconfont iconyonghu"></span>
  16.                 <span class="mui-tab-label">我的</span>
  17.             </a>
  18.         </nav>

第一种方法，也是网上大家采用较多的webview这种方式可以在生成APP时达到很好的切换效果，但是不足之处是普通浏览器无法使用，如果再单独去做兼容，代码冗余较多。

  1. //创建子页面
  2. var subpages = ['index.html','square.html','reading.html','ucenter.html'];
  3. var subpage_style = {
  4.     top: '0px',
  5.     bottom: '50px',
  6.     scrollIndicator: "none" ,// 当你的界面的内容足够多的时候，会出现滚动条，这个是隐藏滚动条
  7. };
  9. //创建子页面，首个选项卡页面显示，其它均隐藏；
  10. mui.plusReady(function(){
  11.     //获得当前页面
  12.     var self = plus.webview.currentWebview();
  13.     //循环创建子页面
  14.     for(var i=0;i<subpages.length;i++){
  15.         var sub = plus.webview.create(subpages[i],subpages[i],subpage_style);
  16.         var sub = plus.webview.create(
  17.             'a.html',
  18.             'a.html',{
  19.     top: '0px',
  20.     bottom: '50px',
  21.     scrollIndicator: "none" ,// 当你的界面的内容足够多的时候，会出现滚动条，这个是隐藏滚动条
  22. });
  23.         if(i>0){
  24.             sub.hide();
  25.         }
  26.         self.append(sub);
  27.     }
  28. });
  31. //当前激活选项卡
  32. var activeTab = subpages[0];
  34. //选项卡点击事件
  35. mui('.mui-bar-tab').on('tap', 'a', function(e) {
  36.     var targetTab = this.getAttribute('href');
  37.     if (targetTab == activeTab) {
  38.             return;
  39.     }
  40.     //显示目标选项卡
  41.     plus.webview.show(targetTab);
  42.     //隐藏当前;
  43.     plus.webview.hide(activeTab);
  44.     //更改当前活跃的选项卡
  45.     activeTab = targetTab;
  46. });
  48. //自定义事件，模拟点击“首页选项卡”
  49. document.addEventListener('gohome',function () {
  50.     var defaultTab = document.getElementById("defaultTab");
  51.     //模拟首页点击
  52.     mui.trigger(defaultTab,'tap');
  53.     //切换选项卡高亮
  54.     var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
  55.     if(defaultTab!==current){
  56.         current.classList.remove('mui-active');
  57.         defaultTab.classList.add('mui-active');
  58.     }
  59. });

第二种方法。原生写法，兼容多端。这也是波波本篇笔记分享的重点。优点是代码简洁，兼容性好，缺点是页面切换时如果涉及外部加载，则会出现白屏现象。

  1. mui('.mui-bar-tab').on('tap','a',function(e){
  2.     var targetTab = this.getAttribute('href');
  3.     mui.openWindow(targetTab);
  4. })

好了，本篇笔记就分享这么多，有其他更优解决方案的朋友也欢迎留言。

你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！