appcan tabview+frame或者openMultiPopover在ios下的屏幕适配问题

来源：互联网发布：tomcat启动端口被占用编辑：程序博客网时间：2024/05/18 10:31

采用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同步切换            }           });      }); })($);

实现效果如下：

阅读全文

0 0