现版本小程序暂时无法监听webview页面高度改变
能实现的方式有在web-view组建的小程序js内,实时监听高度,当通过拉起导航栏等操作导致窗口高度不一致的时候,将更改的高度当作新的网址参数,将会重新加载网页,或者类似ajax获取部分参数,将变化的高度发送到服务器上,然后html网页内通过ajax请求服务器获取这个高度;只有每次onshow的时候能监听到新的高度,定时器监听不到改变;
//小程序内
setIntervar(findHeight,5000)
function findHeight(){
wx.getSystemInfo({
success: function (res) {
console.log(res.screenHeight)
console.log(res.windowHeight)
console.log(res)
},
})
}
复制代码
- 在html网页对应的js内读取此时的屏幕分辨率,可用高度,onresize,offsetBottom这些也无法监听到窗口高度的改变;
//web页面内
setInterval(function(){
console.log("document.body.offsetHeight: "+document.body.offsetHeight)
console.log("document.body.clientHeight "+document.body.clientHeight)
console.log("document.body.scrollHeight "+document.body.scrollHeight)
console.log("window.screen.availHeight "+window.screen.availHeight)
//举例在小程序web-view网页内,拉起和隐藏手机导航栏
//未拉起导航栏时,前三个值为568,第四个值为640
//小程序内的拉伸起导航栏,前三个值为526,第四个值为640
//无论哪种情况,只要web-view的页面一加载进来,就不会随导航栏的拉伸高度而发生任何改变
},10000)
复制代码
- 提供的一种实现根据导航栏是否拉起的不同样式实现的思路,在某些场景下:
- 当发现导航栏拉起,导致此时的某两个元素的offsetTop距离接近,或者为负数时,考虑设置margin-top等css样式来改变,但可能会存在以下4的问题;
- 建议不用考虑华为等手机是否拉起导航栏的问题,高度用百分比,因为如果不能读取高度改变,那么某些手机的导航栏是无法隐藏的,可能会发生导致初始的样式有问题;