概 述

JRedu

　　在上一篇博客中，我们学习了如何使用Hbuilder创建一个APP，同时如何使用MUI搭建属于自己的第一款APP，没有学习的同学可以戳链接学习： http://www.cnblogs.com/jerehedu/p/7832808.html  

　　今天这篇博客，我们继续深入学习MUI框架，主要学习这几个方面：加载子页面、页面跳转并传值，底部选项卡的多种实现方式。

一、MUI加载子页面

 

1加载子页面详解

在mobile app开发过程中，经常遇到卡头卡尾的页面，也就是说头部和尾部保持不动，而只有中间区域可以滚动，常见的就是新闻列表与详情页等情况：

如上图所示，头部和尾部不会跟着滚动，而是只有中间列表区域正常滚动。但这种局部滚动，在android手机上会出现滚动不流畅的问题；

针对这个问题，mui的解决思路是：将需要滚动的区域通过单独的webview实现，完全使用原生滚动。也就是说，将页面分为主页面和子页面两部分，主页面只有头部和尾部，而需要滚动的区域放置到子页面中，并在mui.init()方法中加载。大约就是这么一个效果：

 

 

 

2加载子页面的实现

在上篇博客中，我们介绍了mui.init()方法，这个方法主要用于mui页面的初始化，进行页面加载时的各种配置，接受一个对象类型的参数。

那么，在mui中加载子页面非常简单，只需要对象中传入subpages属性，用数组格式表示多个页面，subpages数组的格式要求如下：

mui.init({
    subpages:[{
      url:your-subpage-url,//子页面HTML地址，支持本地地址和网络地址
      id:your-subpage-id,//子页面标志
      styles:{
        top:subpage-top-position,//子页面顶部位置
        bottom:subpage-bottom-position,//子页面底部位置
        width:subpage-width,//子页面宽度，默认为100%
        height:subpage-height,//子页面高度，默认为100%
        ......
      },
      extras:{}//额外扩展参数
    }]
  });

具体的实现步骤如下：

① 新建主页面，只保留头部和尾部

主页面中输入mHeader、mfooter即可快速生成头尾

        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">在主页面中加载子页面</h1>
        </header>
        
        
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a class="mui-tab-item">
                <span class="mui-icon mui-icon-phone"></span>
                <span class="mui-tab-label">电话</span>
            </a>
            <a class="mui-tab-item">
                <span class="mui-icon mui-icon-email"></span>
                <span class="mui-tab-label">邮件</span>
            </a>
            <a class="mui-tab-item">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">设置</span>
            </a>
        </nav>

② 新建子页面，承载一个列表页

子页面中输入mList，即可快速生成一个列表页面。注意子页面中无需头部尾部，也无需将内容包裹在mBody中。

        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    Item 1
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                     Item 2
                </a>
            </li>
            。。。。。。
        </ul>

③ 主页面的mui.init()方法中加载子页面

mui.init({
    /* 在页面的指定位置，加载子页面，实现卡头卡尾的效果 */
    subpages:[{
      url:"0101-ziye.html",//子页面HTML地址，支持本地地址和网络地址
      id:"0101-ziye.html",//子页面标志
      styles:{
        top:"45px",//子页面顶部位置(顶部选项卡默认高度45px)
        bottom:"51px",//子页面底部位置(顶部导航栏默认高度51px)
        //width:100%,//子页面宽度，默认为100%
        //height:100%,//子页面高度，默认为100%
      },
//    extras:{}//额外扩展参数,页面传值时使用
    }]
})

上述配置代码的详细解释已经在注释中说明，大家按照注释内容配置即可，其中extras:{}用于页面间传值使用，下个章节讲解。

 

二、 页面间跳转并传值

 

1页面间跳转传值概述

在移动APP中，页面之间的跳转传值是非常常用的，一种典型的应用就是从新闻列表页点击每一条新闻，将新闻的id传递到详情页显示，例如下述情