MUI设置卡头卡位的形式进行切换

　　这是mui的官方帮助文档，一切问题都能在这里找到http://dev.dcloud.net.cn/mui/ui/解决方案。

下面是MUI官方对卡头卡尾的一些描述：

在mobile app开发过程中，经常遇到卡头卡尾的页面，此时若使用局部滚动，在android手机上会出现滚动不流畅的问题； mui的解决思路是：将需要滚动的区域通过单独的webview实现，完全使用原生滚动。具体做法则是：将目标页面分解为主页面和内容页面，主页面显示卡头卡尾区域，比如顶部导航、底部选项卡等；内容页面显示具体需要滚动的内容，然后在主页面中调用mui.init方法初始化内容页面。

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:{}//额外扩展参数
    }]
  });

参数说明：styles表示窗口属性，参考5+规范中的WebviewStyle；特别注意，height和width两个属性,即使不设置，也默认按100%计算；因此若设置了top值为非"0px"的情况，建议同时设置bottom值，否则5+ runtime根据高度100%计算，可能会造成页面真实底部位置超出屏幕范围的情况；left、right同理。

示例：Hello mui的首页其实就是index.html加list.html合并而成的，如下：

index.html

+

list.html

=

合并后的首页

index.html的作用就是显示固定导航，list.html显示具体列表内容，列表项的滚动是在list.html所在webview中使用原生滚动，既保证了滚动条不会穿透顶部导航，符合app的体验，也保证了列表流畅滚动，解决了区域滚动卡顿的问题。 list.html就是index.html的子页面，创建代码比较简单，如下：

mui.init({
    subpages:[{
      url:'list.html',
      id:'list.html',
      styles:{
        top:'45px',//mui标题栏默认高度为45px；
        bottom:'0px'//默认为0px，可不定义；
      }
    }]
  });

在mobile app开发过程中，经常遇到卡头卡尾的页面，此时若使用局部滚动，在android手机上会出现滚动不流畅的问题； mui的解决思路是：将需要滚动的区域通过单独的webview实现，完全使用原生滚动。具体做法则是：将目标页面分解为主页面和内容页面，主页面显示卡头卡尾区域，比如顶部导航、底部选项卡等；内容页面显示具体需要滚动的内容，然后在主页面中调用mui.init方法初始化内容页面。

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:{}//额外扩展参数
    }]
  });

参数说明：styles表示窗口属性，参考5+规范中的WebviewStyle；特别注意，height和width两个属性,即使不设置，也默认按100%计算；因此若设置了top值为非"0px"的情况，建议同时设置bottom值，否则5+ runtime根据高度100%计算，可能会造成页面真实底部位置超出屏幕范围的情况；left、right同理。

示例：Hello mui的首页其实就是index.html加list.html合并而成的，如下：

index.html

+

list.html

=

合并后的首页

index.html的作用就是显示固定导航，list.html显示具体列表内容，列表项的滚动是在list.html所在webview中使用原生滚动，既保证了滚动条不会穿透顶部导航，符合app的体验，也保证了列表流畅滚动，解决了区域滚动卡顿的问题。 list.html就是index.html的子页面，创建代码比较简单，如下：

mui.init({
    subpages:[{
      url:'list.html',
      id:'list.html',
      styles:{
        top:'45px',//mui标题栏默认高度为45px；
        bottom:'0px'//默认为0px，可不定义；
      }
    }]
  });

　　那我们就按照官方的指示做出一个简单的卡头卡位的效果。首先，先新建一个项目。


然后在项目中新建几个页面，建成之后的目录结构如图所示。

关于这个页面的作用我介绍一下：
home.html:这里面只有卡头和卡尾的部分。
index.html、email.html、set.html、tel.html:分别对应着下边选项卡的首页、邮箱页、设置页、电话页。

程序的思路是这样的，在mui.init（）执行的时候，就要先把这几个页面加载进来。

<script type="text/javascript" charset="utf-8">
      	mui.init({
      		subpages:[
      			{
      				url:'index.html',
      				id:'index.html',
      				styles:{
      					top:'44px',
      					bottom:'44px'
      				}
      			},
      			{
      				url:'tel.html',
      				id:'tel.html',
      				styles:{
      					top:'44px',
      					bottom:'44px'
      				}
      			},
      			{
      				url:'email.html',
      				id:'email.html',
      				styles:{
      					top:'44px',
      					bottom:'44px'
      				}
      			},
      			{
      				url:'set.html',
      				id:'set.html',
      				styles:{
      					top:'44px',
      					bottom:'44px'
      				}
      			}]

      	});
    </script>

　　mui.init()是一个方法，表明mui的基础控件加载完毕，mui.init({})里面可以执行一个代码块，这个代码块里面可以写一些mui初始化完毕后执行的代码，比如说，我们这里要执行的是把这几个页面给加载进来。语法呢，是json的语法，[]代表数组，{}代表对象，对象与对象之间用，隔开。在每个对象内部各个属性的含义如下：

url：要导入的页面的URL地址；

id：给要导入的页面赋予一个id，到时候可以根据plus.webView.getWebViewById()来获取到这个页面；

styles：里面可以设置一些样式。

　　把这几个页面导入之后，我们要实现点击下面对应的选项卡，然后中间呈现不同的页面。

<script type="text/javascript" charset="utf-8">

          mui.plusReady(function() {
              changeView('index.html');
              // 根据类名获取到的元素是一个数组，不是一个单个的元素，即使只有一个元素的话，那也要用[0]来访问
              var tabs = document.getElementsByClassName("mui-tab-item");
              for(var i = 0;i < tabs.length;i++){
                  tabs[i].addEventListener('tap',function(){
                      var id = this.id;
                      changeView(id);
                  });
              }
          });
          function changeView(id)
          {
              console.info('事件发生              '+id)
              plus.webview.getWebviewById(id).show();
              var title = document.getElementById(id).querySelector(".mui-tab-label").innerHTML.toString();
              console.info(title+"-----------");
              // 根据类名获取到的元素是一个数组，不是一个单个的元素，即使只有一个元素的话，那也要用[0]来访问
              document.getElementsByClassName("mui-title")[0].innerHTML = title;
          }
    </script>