这是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显示具体列表内容，列表项的滚动是在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显示具体列表内容，列表项的滚动是在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>