r***@ZIJJJ.COM
r***@ZIJJJ.COM
  • 发布:2018-09-08 10:26
  • 更新:2018-10-08 12:54
  • 阅读:1129

【报Bug】使用沉浸式状态栏后,绘制原生对象时,区域信息对象(position)的定位有问题,如图

分类:HTML5+

详细问题描述
当使用沉浸式状态栏后,并且当前页面使用渐变导航栏,绘制原生对象时(new plus.nativeObj.View),区域信息对象(position)的定位有问题,如图

重现步骤
[步骤]
在manifest.json设置使用沉浸式状态栏

"statusbar": {  
    "immersed": "supportedDevice",  
    "style": "dark"  
}

在父窗口设置子窗口的导航栏样式并打开

mui.openWindow({  
    url: 'shopping-mall.html',  
    id: 'shopping-mall.html',  
    styles: {  
        kernel: 'WKWebview', // 为了实现导航栏实时监测,所以采用webkit内核  
        titleNView: {  
            autoBackButton: true,  
            backgroundColor: '#f7f7f7',  
            titleText: ' ', // 如果这里不设置空格,同样也会触发一个兼容问题的BUG  
            splitLine: {  
                color: '#ddd'  
            },  
            type: 'transparent',  
            buttons: [{  
                float: 'right',  
                fontSrc: '_www/src/fonts/mui.ttf',  
                text: '\ue507',  
                onclick() {  
                    var currentWebview = getWebview('shopping-mall.html')  
                    currentWebview.evalJS('app.toggleMenu()')  
                }  
            }]  
        }  
}

然后在子窗口创建原生对象

view = new plus.nativeObj.View('title', {  
    top: '20px', right: '0px', height: '44px'  
})  
view.interceptTouchEvent(true)  
// 绘制原生对象  
view.draw([{  
    id: 'rect',  
    tag: 'rect',  
    position: {top: '6px', left: '50px', right: '50px', bottom: '6px'},  
    rectStyles: {  
        radius: '30px',  
        color: 'rgba(50,50,50,.5)'  
    }  
}, {  
    id: 'font1',  
    tag: 'font',  
    text: '\ue466',  
    position: {top: '6px', left: '60px', right: '50px', bottom: '6px'},  
    textStyles: {  
        align: 'left',  
        color: '#ccc',  
        size: '20px',  
        fontSrc: '_www/src/fonts/mui.ttf',  
    }  
}, {  
    id: 'font2',  
    tag: 'font',  
    text: '想找什么,搜搜看',  
    position: {top: '6px', left: '85px', right: '50px', bottom: '6px'},  
    textStyles: {  
        align: 'left',  
        color: '#ccc',  
        size: '12px',  
    }  
}])  

// 绑定事件处理  
view.addEventListener('click', e => {  
    var x = e.clientX  
    if(x < 55) { // 触发返回菜单  
        mui.back()  
    } else if(x > window.innerWidth - 55) { // 触发右侧菜单  
        this.toggleMenu()  
    } else { // 点击搜索框跳转到搜索页  
        mui.openWindow({  
            url: 'search-main.html',  
            id: 'search-main.html',  
            styles: {  
                statusbar: {  
                    background: '#fff'  
                }  
            },  
            waiting: {  
                autoShow: false  
            }  
        })  
    }  
}, false)  

// 监听屏幕滑动,更新导航栏图标  
function bufferFn() {  
    if (app.isOpenMenu) {  
        app.isOpenMenu = false  
    }  
    let y = window.scrollY  
    if (y > 120) {  
        view.drawRect({radius: '30px', color: 'rgba(200,200,200,.5)'}, {top: '6px', left: '50px', right: '50px', bottom: '6px'}, 'rect')  
        view.drawText('\ue466', {top: '6px', left: '60px', right: '50px', bottom: '6px'}, {  
            align: 'left',  
            color: '#333',  
            size: '20px',  
            fontSrc: '_www/src/fonts/mui.ttf',  
        }, 'font1')  
        view.drawText('想找什么,搜搜看', {top: '6px', left: '85px', right: '50px', bottom: '6px'}, {  
            align: 'left',  
            color: '#333',  
            size: '12px',  
        }, 'font2')            
    } else {  
        view.drawRect({radius: '30px', color: 'rgba(50,50,50,.5)'}, {top: '6px', left: '50px', right: '50px', bottom: '6px'}, 'rect')  
        view.drawText('\ue466', {top: '6px', left: '60px', right: '50px', bottom: '6px'}, {  
            align: 'left',  
            color: '#ccc',  
            size: '20px',  
            fontSrc: '_www/src/fonts/mui.ttf',  
        }, 'font1')  
        view.drawText('想找什么,搜搜看', {top: '6px', left: '85px', right: '50px', bottom: '6px'}, {  
            align: 'left',  
            color: '#ccc',  
            size: '12px',  
        }, 'font2')  
    }  
}   
window.addEventListener('scroll', bufferFn)  

this.currentWebview.append(view)  
view.show()

[结果]
结果 这时IOS设备的top值是按照从状态栏顶端开始算起,如图1,2

而安卓是从状态栏底部开始算起,如图3,4

目前只能通过判断设备来处理该兼容问题

if (mui.os.android) {  
    // 安卓设备top设置0  
    view = new plus.nativeObj.View('title', {  
        top: '0px', right: '0px', height: '44px'  
    })  
} else {  
    // ios设备top设置20px  
    view = new plus.nativeObj.View('title', {  
        top: '20px', right: '0px', height: '44px'  
    })  
}

[期望]
修复此BUG

运行环境
[系统版本]
win10
[浏览器版本]

[IDE版本]
HBuilder 9.1.19.201808300739

[手机操作系统]
IOS和安卓
[手机型号]
iphone6 和 华为荣耀v8
[mui版本]
3.7.2

附件
[代码片段]
[安装包]

联系方式
[QQ]
81788223
[电话]

2018-09-08 10:26 负责人:无 分享
已邀请:
DCloud_App_Array

DCloud_App_Array

请把示例Demo发出来。

该问题目前已经被锁定, 无法添加新回复