您需要登录后才可以操作登录 | 立即注册
关闭
楼主
srmith
  • TA的每日心情
    开心
    2016-4-28 09:25
  • 签到天数: 2 天

    连续签到: 1 天

    [LV.1]初来乍到

    [JS SDK] 使用appcan.frame.open 打开多浮动窗口 footer被覆盖 [复制链接]

    1402 8 发表于 2016-12-16 11:26:26

    本帖最后由 srmith 于 2016-12-16 11:29 编辑

    华为、魅族手机兼容性问题  使用appcan.frame.open 打开多浮动窗口 footer被覆盖三星、小米手机是正常的

    我还试过用appcan.frame.openMulti 打开多浮动窗口,但是华为、魅族手机同样有问题
    appcan.frame.openMulti这个方法可以指定浮动窗的高度,footer可以显示出来,但是浮动窗口没有被加载进来,页面一片空白
    代码如下:
    var height = $("#footer").offset().top;
                var top = $('#header').height();
                var titHeight = $('#header').offset().height;
                appcan.frame.open({
                    id : "content",
                    name : "home",
                    url : [{
                        "inPageName" : "p1",
                        "inUrl" : "content/index_content.html"
                    }, {
                        "inPageName" : "p2",
                        "inUrl" : "content/message_content.html"
                    }, {
                        "inPageName" : "p3",
                        "inUrl" : "content/feedback_content.html"
                    }, {
                        "inPageName" : "p4",
                        "inUrl" : "content/personal_info_content.html"
                    }],
                    top : top,
                    left : 0
                });
                window.onorientationchange = window.onresize = function() {
                    appcan.frame.resize("content", 0, titHeight);
                };


    沙发
    srmith
  • TA的每日心情
    开心
    2016-4-28 09:25
  • 签到天数: 2 天

    连续签到: 1 天

    [LV.1]初来乍到

    显示全部楼层 发表于 2016-12-16 11:46:35
    本帖最后由 srmith 于 2016-12-16 11:52 编辑

    打开一个浮动窗口是正常的,本地调试器上面也是正常的,就在线打包有问题
    板凳
    xue.chen@zymobi

    该用户从未签到

    显示全部楼层 发表于 2016-12-17 10:34:35
    加个index参数试试,我也是用过这个方法,没发现问题,看着不同就在于加了index和change回调
    地板
    srmith
  • TA的每日心情
    开心
    2016-4-28 09:25
  • 签到天数: 2 天

    连续签到: 1 天

    [LV.1]初来乍到

    显示全部楼层 发表于 2016-12-19 08:39:48
    xue.chen@zymobi 发表于 2016-12-17 10:34
    加个index参数试试,我也是用过这个方法,没发现问题,看着不同就在于加了index和change回调 ...

    是手机兼容性的问题,华为手机有问题,估计是jssdk的bug
    5#
    xue.chen@zymobi

    该用户从未签到

    显示全部楼层 发表于 2016-12-20 15:11:11
    srmith 发表于 2016-12-19 08:39
    是手机兼容性的问题,华为手机有问题,估计是jssdk的bug

    我在华为手机上测试没有问题呢,你用最新的jssdk试试
    6#
    xue.chen@zymobi

    该用户从未签到

    显示全部楼层 发表于 2016-12-20 18:20:37

    我猜测应该是时间顺序问题,tabview加载出来之前,先打开了多浮动窗口,这时tabview还没有加载出来,底部还没占位好,导致content区域大导致覆盖。
    可以先加载tabview,再打开多浮动窗口,或者事先占好高度
    7#
    srmith
  • TA的每日心情
    开心
    2016-4-28 09:25
  • 签到天数: 2 天

    连续签到: 1 天

    [LV.1]初来乍到

    显示全部楼层 发表于 2016-12-21 13:31:07
    xue.chen@zymobi 发表于 2016-12-20 18:20
    我猜测应该是时间顺序问题,tabview加载出来之前,先打开了多浮动窗口,这时tabview还没有加载出来,底部 ...

    tabview是在window窗口上,打开浮动窗的代码卸载 appcan.ready(function() {})里面的,理论上讲 window窗口执行appcan.ready方法的时候 tabview已经加载好了才对啊

    难道加载浮动窗口的时候,主窗口的内容还没加载好???
    这就奇怪了

    jssdk  我看了  最新的是appcan v1.0.0 Beta  我用的也是这个版本啊
    8#
    xue.chen@zymobi

    该用户从未签到

    显示全部楼层 发表于 2016-12-21 14:10:21
    估计是部分手机有这个问题,你可以做一个测试,在footer出来后再加载浮动页
    9#
    张雨凡

    该用户从未签到

    显示全部楼层 发表于 2018-12-29 12:17:14
    怎么实现底部菜单跳转和页面的选项卡跳转,这两个地方我都用的tab+frame窗体,然后总是有冲突不知道怎么解决,可以给个demo代码吗<!DOCTYPE html>
    <html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">

        <head>
            <title></title>
            <meta charset="utf-8">
            <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
            <link rel="stylesheet" href="css/fonts/font-awesome.min.css">
            <link rel="stylesheet" href="css/ui-box.css">
            <link rel="stylesheet" href="css/ui-base.css">
            <link rel="stylesheet" href="css/ui-color.css">
            <link rel="stylesheet" href="css/appcan.icon.css">
            <link rel="stylesheet" href="css/appcan.control.css">
            <link rel="stylesheet" href="./css/index.css">
        </head>

        <body class="um-vp" ontouchstart>
            <div id="page_0" class="up ub ub-ver bc-bg" tabindex="0">
                <!--header开始-->
                <div id="indexHeader" class="uh bc-text-head ub bc-head">
                    <div class="nav-btn" id="nav-left">
                        <div class="fa fa-angle-left fa-2x"></div>
                    </div>
                    <h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">复选框(checkbox)</h1>
                    <div class="nav-btn nav-bt" id="nav-right">
                        <!--按钮开始-->

                        <!--按钮结束-->
                    </div>
                </div>
                <!--header结束-->

                <div id="tabs" class="uf sc-bg" id="">

                </div>
                <!--header结束--><!--content开始-->
                <div id="tabsCont" class="ub-f1 tx-l">

                </div>
                <!--content结束-->

                <!-- 底部 -->
                <div id="bottomCont" class="ub-f1 tx-l"></div>
                <!--底部结束-->
                <div id="bottomTab" class="uf sc-bg ubt sc-border-tab">

                </div>
            </div>
            <script src="js/appcan.js"></script>
            <script src="js/appcan.control.js"></script>
            <script src="js/appcan.scrollbox.js"></script>
            <script src="js/template.import.js"></script>
            <script src="./assets/mvvm/index.js"></script>
            <script src="js/appcan.tab.js"></script>
            <script src="./js/index.js"></script>
            <script src="js/appcan.slider.js"></script>

        </body>

    </html>
    <script>
        var tabs = appcan.tab({
            selector : "#tabs",
            hasIcon : false,
            hasAnim : true,
            hasLabel : true,
            hasBadge : false,
            data : [{
                label : "军事",
            }, {
                label : "经济",
            }, {
                label : "教育",
            }]
        });
        tabs.on("click", function(obj, index) {
            appcan.window.selectMultiPopover("tabsCont", index);
        })

       
            var top = $('#indexHeader').offset().height + $('#tabs').offset().height;
            appcan.frame.open({
                id : "tabsCont",
                url : [{
                    "inPageName" : "switch",
                    "inUrl" : "lv_thickline_icon_sub_angle_content.html",
                }, {
                    "inPageName" : "radio",
                    "inUrl" : "lv_thickline_multi_content.html",
                }, {
                    "inPageName" : "checkbox",
                    "inUrl" : "lv_thinline_icon_sub_angle_content.html",
                }],
                top : top,
                left : 0,
                index : 0,
                change : function(err, res) {
                    tabview.moveTo(res.multiPopSelectedIndex);
                }
            });
            window.onorientationchange = window.onresize = function() {
                appcan.frame.resize("tabsCont", 0, top);
            }

        appcan.button(".nav-btn", "btn-act", function() {
            appcan.window.close(-1);
        })

    </script>
    <script>
        var bottomTab = appcan.tab({
            selector : "#bottomTab",
            hasIcon : true,
            hasAnim : false,
            hasLabel : true,
            hasBadge : false,
            data : [{
                label : " 首页 ",
                icon : "fa-home"
            }, {
                label : "旅行日程",
                icon : "fa-calendar-o"
            }, {
                label : "语音查询",
                icon : "fa-microphone"
            }, {
                label : "联系我们",
                icon : "fa-phone"
            }, {
                label : "联系我们",
                icon : "fa-phone"
            }]
        });
        bottomTab.on("click", function(obj, index) {
            appcan.window.selectMultiPopover("bottomCont", index);
        })
        appcan.ready(function() {
            var top = $('#indexHeader').offset().height;
            appcan.frame.open({
                id : "bottomCont",
                url : [{
                    "inPageName" : "switch",
                    "inUrl" : "main.html",
                }, {
                    "inPageName" : "radio",
                    "inUrl" : "lv_thickline_multi_content.html",
                }, {
                    "inPageName" : "checkbox",
                    "inUrl" : "lv_thinline_icon_sub_angle_content.html",
                }, {
                    "inPageName" : "checkbox",
                    "inUrl" : "lv_thinline_icon_sub_angle_content.html",
                }, {
                    "inPageName" : "checkbox",
                    "inUrl" : "lv_thinline_icon_sub_angle_content.html",
                }],
                top : top,
                left : 0,
                index : 0,
                change : function(index, res) {
                    console.log(index + " " + res);
                    tabview.moveTo(res.multiPopSelectedIndex);
                }
            });
            window.onorientationchange = window.onresize = function() {
                appcan.frame.resize("bottomCont", 0, top);
            }
        });
        appcan.button(".nav-btn", "btn-act", function() {
            appcan.window.close(-1);
        })

    </script>
    主题:
    级别:游客
    发帖:
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    快速回复 返回顶部 返回列表