WEBAPP开发教程[webAPP项目]基于MUI框架webAPP之头部导航与底部导航制作详解02-职坐标

WEBAPP开发教程[webAPP项目]基于MUI框架webAPP之头部导航与底部导航制作详解02

凌雪 2018-10-11 来源：网络阅读 809 评论 0

摘要：本文将带你了解WEBAPP开发教程[webAPP项目]基于MUI框架webAPP之头部导航与底部导航制作详解02，希望本文对大家学WEBAPP有所帮助。

本文将带你了解WEBAPP开发教程[webAPP项目]基于MUI框架webAPP之头部导航与底部导航制作详解02，希望本文对大家学WEBAPP有所帮助。

前言

      一个完整的APP少不了,要有头部导航跟底部导航,那么我们在用MUI框架来开发APP时,在制作头部导航很底部选项卡时我们应该要注意哪些呢?

     接下来给大家来详细讲解一下:
     在上一节中我们已经介绍怎么去做一个开机引导图了[webAPP项目]基于MUI框架webAPP开发功能流程之引导图制作详解01如果不会的,就按照上一篇文章讲解的自己在作一遍.
     效果图
     最终我们要实现的效果如下:
     具体实现
     1.首先创建4个底部选项卡页面
     home1.html;home2.htmlhome3.htmlhome4.html
     2.index.html代码实现
     创建完之后,我们返回程序加载的入口index.html去写相关的代码:
     首先床架四个底部选项卡:
     <nav class="mui-bar mui-bar-tab"> <a id="defaultTab" class="mui-tab-item mui-active" href="templete/home1.html"> <span class="mui-icon mui-icon-home"></span> <span>首页01</span> </a> <a href="templete/home2.html"> <span class="mui-icon mui-icon-home"></span> <span>首页02</span> </a> <a href="templete/home3.html"> <span class="mui-icon mui-icon-home"></span> <span>首页03</span> </a> <a class="mui-tab-item" href="templete/home4.html"> <span class="mui-icon mui-icon-home"></span> <span>首页04</span> </a>      </nav>
     function jumpPage(){ //跳转页面 var subpages = ['templete/home1.html','templete/home2.html', 'templete/home3.html', 'templete/home4.html']; var subpage_style = { top: '0px', bottom: '51px' }; var aniShow = {};//动画显示    //首次启动切滑效果 mui.plusReady(function(){ launchScreen(); var self = plus.webview.currentWebview(); for (var i = 0; i < 4; i++) { var temp = {}; ////www.html5plus.org/doc/zh_cn/webview.html#plus.webview.create var sub = plus.webview.create(subpages[i], subpages[i], subpage_style); if (i > 0) { sub.hide(); }else{ temp[subpages[i]] = "true"; mui.extend(aniShow,temp);//合并对象 } self.append(sub); } }); //当前激活选项 var activeTab = subpages[0]; var title = document.getElementById("title"); //选项卡点击事件 mui('.mui-bar-tab').on('tap', 'a', function(e) { var targetTab = this.getAttribute('href'); if (targetTab == activeTab) { return; } //更换标题// title.innerHTML = this.querySelector('.mui-tab-label').innerHTML; //显示目标选项卡 //若为iOS平台或非首次显示，则直接显示 if(mui.os.ios||aniShow[targetTab]){ plus.webview.show(targetTab); }else{ //否则，使用fade-in动画，且保存变量 var temp = {}; temp[targetTab] = "true"; mui.extend(aniShow,temp); plus.webview.show(targetTab,"fade-in",300); } //隐藏当前; plus.webview.hide(activeTab); //更改当前活跃的选项卡 activeTab = targetTab; }); //自定义事件，模拟点击“首页选项卡” document.addEventListener('gohome', function() { var defaultTab = document.getElementById("defaultTab"); //模拟首页点击 mui.trigger(defaultTab, 'tap'); //切换选项卡高亮 var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active"); if (defaultTab !== current) { current.classList.remove('mui-active'); defaultTab.classList.add('mui-active'); } });
     这样就实现了,点击各个页面,可以自由切换了
     3.实现下面的选项卡与头部的导航的标题对应
     现在去刚才创建的html中去分别加入这几行代码:
     home1.html
     <header class="mui-bar mui-bar-nav"> <h1>home1</h1> </header>
     home2.html
     <header class="mui-bar mui-bar-nav"> <h1>home1</h1> </header>
     home3.html
     <header class="mui-bar mui-bar-nav"> <h1>home1</h1> </header>
     home4.html
     <header class="mui-bar mui-bar-nav"> <h1>home1</h1> </header>
     这个一个底部选项卡跟头部导航就做完啦,在做的的过程中大家要明白几个函数的意思,下面就我们使用的几个函数给大家解释一下:
     函数解释
     mui.extend()

     示例
     var target = { company:"dcloud", product:{ mui:"小巧、高效" }} var obj1 = { city:"beijing", product:{ HBuilder:"飞一样的编码" }}mui.extend(target,obj1);//输出：{"company":"dcloud","product":{"HBuilder":"飞一样的编码"},"city":"beijing"}console.log(JSON.stringify(target));
     从如上输出可以看到，product节点下的mui被替换成了HBuilder，因为默认仅合并对象根节点下的key、value；如果想深度合并，则可以传入deep参数，如下：
     var target = { company:"dcloud", product:{ mui:"小巧、高效" }} var obj1 = { city:"beijing", product:{ HBuilder:"飞一样的编码" }}//支持深度合并mui.extend(true,target,obj1);//输出：{"company":"dcloud","product":{"mui":"小巧、高效","HBuilder":"飞一样的编码"},"city":"beijing"}console.log(JSON.stringify(target));



      plus.webview.create创建新的
     WebviewObject plus.webview.create( url, id, styles, extras );
     说明：
     创建Webview窗口，用于加载新的HTML页面，可通过styles设置Webview窗口的样式，创建完成后需要调用show方法才能将Webview窗口显示出来。
     参数：

      url: ( String ) 可选新窗口加载的HTML页面地址新打开Webview窗口要加载的HTML页面地址，可支持本地地址和网络地址。 id: ( String ) 可选新窗口的标识窗口标识可用于在其它页面中通过getWebviewById来查找指定的窗口，为了保持窗口标识的唯一性，应该避免使用相同的标识来创建多个Webview窗口。如果传入无效的字符串则使用url参数作为WebviewObject窗口的id值。 styles: ( WebviewStyles ) 可选创建Webview窗口的样式（如窗口宽、高、位置等信息） extras: ( JSON ) 可选创建Webview窗口的额外扩展参数值为JSON类型，设置扩展参数后可以直接通过Webview的点（“.”）操作符获取扩展参数属性值，如： var w=plus.webview.create(‘url.html’,’id’,{},{preload:”preload webview”}); // 可直接通过以下方法获取preload值 console.log(w.preload); // 输出值为“preload webview”

     返回值：
      WebviewObject : Webview窗口对象
     示例:
     <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Webview Example</title> <script type="text/javascript">// H5 plus事件处理function plusReady(){}if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); }// 创建并显示新窗口function create(){ var w = plus.webview.create( "//weibo.com/dhnetwork" ); w.show(); // 显示窗口} </script> </head> <body> 创建新的Webview窗口<br/> <button onclick="create()">Create</button> </body></html>
     currentWebview
     获取当前窗口的WebviewObject对象
     WebviewObject plus.webview.currentWebview();
     说明：
     获取当前页面所属的Webview窗口对象。
     参数：
     无
     返回值：
     WebviewObject : Webview窗口对象
     结束
     差不多就这几个函数比较难懂,这样一个简单的底部选项卡与头部导航就做完了,接下来会给大家讲解,数据解析的几种方式,包括数据展示应该注意什么,请关注下一节:
     [webAPP项目]基于MUI框架webAPP开发功能流程之轮播图制作详解03