详细问题描述
当使用沉浸式状态栏后,并且当前页面使用渐变导航栏,绘制原生对象时(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
[电话]