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

前言

一个完整的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 class="mui-tab-label">首页01</span>       </a>      <a class="mui-tab-item" href="templete/home2.html">                <span class="mui-icon mui-icon-home"></span>                <span class="mui-tab-label">首页02</span>       </a>      <a class="mui-tab-item" href="templete/home3.html">                <span class="mui-icon mui-icon-home"></span>                <span class="mui-tab-label">首页03</span>       </a>      <a  class="mui-tab-item" href="templete/home4.html">                <span class="mui-icon mui-icon-home"></span>                <span class="mui-tab-label">首页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 = {};                     //http://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 class="mui-title">home1</h1>         </header>

home2.html

<header class="mui-bar mui-bar-nav">            <h1 class="mui-title">home1</h1>         </header>

home3.html

<header class="mui-bar mui-bar-nav">            <h1 class="mui-title">home1</h1>         </header>

home4.html

<header class="mui-bar mui-bar-nav">            <h1 class="mui-title">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( "http://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