采用tabview+frame设计页面有很多好处，比如一次可以预加载多个页面，用户操作时比较流畅，也可以开启左右滑动，和原生体验一样，在安卓上实现出来，效果还是不错的，在适配IOS的时候遇到问题，和安卓里同样的尺寸测量方法，在ios里显示的页面要大很多，高度和宽度都大。经过不断测尝试，发现iphone5/5s/ 6/6s/7 高度和宽度都需要除以2，
而6/6s/7 plus则需要除以3，才能正确显示。还有一个问题，frame.open方法只能指定窗口显示的位置，不能指定高度，这样如果底部的footer和tabview就会被顶处屏幕底部，只能使用window.openMultiPopover来实现，核心的东西就这些，上代码：
页面代码：
<div class="bc-bg" tabindex="0" data-control="PAGE" id="Page_HPbCr2"> <div data-control="CONTENT" id="content"> </div> </div> <div class="uf sc-bg ubt sc-border-tab" data-control="FOOTER" id="Footer_urStjf"> <div class="" data-control="TAB" id="Tab_bkYbpa"> </div> </div> 页面代码就这么多，底部一个footer包含一个tab，上面是个content容器，用来显示frame或者openMultiPopover窗口内容，我的子页面都是自己实现的头部，所以这里头部的header也没有了。下面是干货：
(function($) { var tabview_Tab_eryaGA = appcan.tab({ selector: $("#Tab_bkYbpa"), hasIcon: true, hasAnim: false, hasLabel: true, hasBadge: false, index: 0, data: [{ "label": "首页", "icon": "icon1" }, { "label": "页面1", "icon": "icon2" }, { "label": "页面2", "icon": "icon3" }, { "label": "页面3", "icon": "icon4" }] }); tabview_Tab_eryaGA.on("click",function(obj, index){ appcan.window.selectMultiPopover("content",index); //切换tab时页面同步切换 }); appcan.ready(function() { var titHeight = $('#Footer_urStjf').offset().height; var conHeight = $('#Page_HPbCr2').offset().height; var height = (conHeight-titHeight)/3; if(conHeight == 1334){ //iphone6上测量的高度 height = (conHeight-titHeight)/2; }else if(conHeight == 2001){ //plus上测量的高度 height = (conHeight-titHeight)/3; }else{ height = (conHeight-titHeight)/2;//5s本来以为不一样，实际和6是一样的 } appcan.window.openMultiPopover({ popName:'content', content:{ 'content':[{ "inPageName" : "index2", "inUrl" : "index2.html" },{ "inPageName" : "artist", "inUrl" : "1.html" },{ inPageName:'personal-tailor', inUrl:'2.html', },{ "inPageName" : "personal", "inUrl" : "3.html" }] }, left:0,//屏幕顶端开始 height:0, height:height,//指定高度 底部有footer dataType:0, flag:0, indexSelected:0, change:function(err,res){ tabview_Tab_eryaGA.moveTo(res.multiPopSelectedIndex);//左右滑动切换页面时 tab同步切换 } }); }); })($);实现效果如下：
