【apicloud】开启横竖屏自动切换后页面高度替换问题

项目在pad端为了更贴合用户体验，加入了横竖屏自动切换，让用户能体验到横屏浏览的体验。

项目布局是以win+frm的形式，所以在横竖屏切换时需要设置监听去重新计算页面高度并进行配置。

同时需要注意的点是：IOS横竖屏切换时并不会自动将页面宽度和高度互换，需要我们自行在代码中设置切换。

代码贴上：（可根据自身项目需求变更、调试）

function orientationchange(frameName){
    window.addEventListener("orientationchange", function(){

        //重新适配头部高度，并取值
        var header_h = 0;
        if($api.byId('aui-header')){
            $api.fixStatusBar($api.byId('aui-header'));
            header_h = $api.offset($api.byId('aui-header')).h;
        }

        //重新适配底部高度，并取值
        var footer_h = 0;
        if($api.byId('aui-footer')){
            $api.fixTabBar($api.byId('aui-footer'));
            footer_h = $api.offset($api.byId('aui-footer')).h;
        }

        //判断是否IOS，若为横屏状态则将页面宽度设置为高度
        var winHeight = api.winHeight;
        if(window.orientation == 90 && api.systemType == 'ios'){
            winHeight = api.winWidth;
        }

        api.setFrameAttr({
            name: frameName,
            rect: {x:0, y:header_h, w:'auto', h:winHeight - header_h - footer_h},
        });
    }, false);
}

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： 【apicloud】如何打包安卓等级28版本包
• 下一篇： 【apicloud】APP本地调试时乱码