简单实现mui-底部选项卡

关于底部选项卡的问题我查看了很多种方法，试了无数次，终于找到适合自己的一种方法。

我在看官方的mui文档的时候发现并没有找到选项卡的位置，所以我并没有采纳可能是我太笨了吧接触的还少，先说说我原先是如何写底部选项卡的

<nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active" href="pSMain.html"><span class="mui-icon "><img src="img/23.png"/></span><span class="mui-tab-label"  >首页</span></a><a class="mui-tab-item" href="mbs.html"><span class="mui-icon "><img src="img/22.png"/></span><span class="mui-tab-label"  >麦博士</span></a><a class="mui-tab-item" href="knowlage.html"><span class="mui-icon "><img src="img/24.png"/></span><span class="mui-tab-label"  >知识库</span></a><a class="mui-tab-item" href="set.html"><span class="mui-icon "><img src="img/25.png"/></span><span class="mui-tab-label"  >设置</span></a>
</nav>

在底部选项卡的a标签里面写链接不管是模拟器还是手机是不能访问的所以我们给a标签加上id属性从而设置跳转另一个页面。

document.getElementById('a3').addEventListener('tap',function(){mui.openWindow({url : 'knowlage.html',id :'knowlage.html'})
});

这样填写是绝对没有问题的，但是不能达到我们想要的的结果，因为跳转之后我们发现跳转之后的页面底部选项卡消失了

在这里我不得不说一件非常愚蠢的事情，我不知道该如何写所以我一连写了四个页面，每个页面都设有跳往其他页面的连接，也就是说我每个页面写的都是几乎一样，然而我并不是要这种结果所以我接着尝试了其他的方法。

显示点击的页面，隐藏未点击的所有页面，这样就可以实现了当然预加载所有页面

最后我的实现代码如下

                  mui.init({subpages:[{  url:'pSMain.html',  id:'pSMain.html',  styles:{  top:'0px',  bottom:'50px'  }  }],  preloadPages:[{  url:'mbs.html',  id:'mbs.html',  styles:{top:'0px',bottom:'50px'  }  },{  url:'knowlage.html',  id:'knowlage.html',  styles:{  top:'0px',  bottom:'50px'  }  },{url:'set.html',id:'set.html',styles:{top:'0px',bottom:'50px'}}] });document.getElementById('a1').addEventListener('tap',function(){a1=plus.webview.getWebviewById("pSMain.html");  a1.show();a2.hide();a3.hide();a4.hide();})  document.getElementById('a2').addEventListener('tap',function(){a2=plus.webview.getWebviewById("mbs.html");  a2.show();})  document.getElementById('a3').addEventListener('tap',function(){a3=plus.webview.getWebviewById("knowlage.html");  a3.show();})  document.getElementById('a4').addEventListener('tap',function(){a4=plus.webview.getWebviewById("set.html");a4.show();})

这是js的部分，至于前面的我只是添加了一个id的属性值。

<nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active" id="a1"><span class="mui-icon "><img src="img/23.png"/></span><span class="mui-tab-label"  >首页</span></a><a class="mui-tab-item" id="a2"><span class="mui-icon "><img src="img/22.png"/></span><span class="mui-tab-label"  >麦博士</span></a><a class="mui-tab-item"id="a3"><span class="mui-icon "><img src="img/24.png"/></span><span class="mui-tab-label"  >知识库</span></a><a class="mui-tab-item" id="a4"><span class="mui-icon "><img src="img/25.png"/></span><span class="mui-tab-label"  >设置</span></a>
</nav>

这个是主页面，至于其他页面你只需要新建四个含mui的HTML页面就行了id分别改成pSMain.html,mbs.html,knowlage.html,set.html就行了！

不过这里记住要将新建的几个页面与主页面建在同一个目录下，如果不是要更改预加载页面的url。

简单实现mui-底部选项卡相关推荐

mui底部选项卡切换功能
mui底部选项卡实现切换功能  <!DOCTYPE html> <html> <head> <met ...
MUI底部选项卡分类
底部选项卡-div模式:所谓div模式的选项卡,其实就是通过DIV模拟一个独立页面,通过div显示,隐藏模拟不同页面的切换,典型的SPA模式:这种模式适合简单业务系统,因为每个选项卡内容都要写在有一个 ...
HBuilder开发旅游类APP(三) ----- 给APP添加底部导航栏(底部选项卡)
HBuilder开发旅游类APP(三) ----- 给APP添加底部导航栏(底部选项卡) 作者:班尼科本博文是本人原创,喜欢请给我点赞,转载请注明出处哦. 标签: 旅游 HBuilder H5+ M ...
MUI框架开发HTML5手机APP(二)--页面跳转传值底部选项卡切换
原文链接: 一.MUI加载子页面 1加载子页面详解在mobile app开发过程中,经常遇到卡头卡尾的页面,也就是说头部和尾部保持不动,而只有中间区域可以滚动,常见的就是新闻列表与详情页等情况: ...
连接真机开发安卓(Android)移动app MUI框架反馈意见、忘记密码、登录、底部选项卡、联系我们、导航等页面代码可拿——混合式开发（六）
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 开头先分享个有趣的 ...
mui退出登录但不退出软件继续登录，底部选项卡不能使用问题
1.首先start.html是我的开机启动页面. 有两种方式进入软件: 第一种方式:当用户未登录时,用户会进入登录页面.使用 plus.webview.getLaunchWebview();//获取应 ...
底部选项卡凸出底部栏的解决办法
底部选项卡凸出底部栏的解决办法在跟布局添加下面的代码就好了, android:clipChildren="false" 复制代码转载于:https://juejin.im/po ...
mintUi底部选项卡切换
主要用到的是二级路由还有路径的部分截取 <template> <div>  <router- ...
html选项卡切换代码,js实现简单的可切换选项卡效果
本文实例讲述了js实现简单的可切换选项卡效果的方法.分享给大家供大家参考.具体如下: 如图,最简单的纯粹的选项卡第一步,当然是先写html代码和css样式无标题文档 body,ul,li{marg ...

简单实现mui-底部选项卡

关于底部选项卡的问题我查看了很多种方法，试了无数次，终于找到适合自己的一种方法。

显示点击的页面，隐藏未点击的所有页面，这样就可以实现了当然预加载所有页面

简单实现mui-底部选项卡相关推荐

最新文章

热门文章