2018年版本的小程序暂时无法监听webview页面高度改变【2019年五月测试能够实现自适应】

583 阅读2分钟

现版本小程序暂时无法监听webview页面高度改变现在可以实现自适应了

  1. 能实现的方式有在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)
	    },
	  })
	}
  1. 在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)
  1. 提供的一种实现根据导航栏是否拉起的不同样式实现的思路,在某些场景下:
  • 当发现导航栏拉起,导致此时的某两个元素的offsetTop距离接近,或者为负数时,考虑设置margin-top等css样式来改变,但可能会存在以下4的问题;
  1. 建议不用考虑华为等手机是否拉起导航栏的问题,高度用百分比,因为如果不能读取高度改变,那么某些手机的导航栏是无法隐藏的,可能会发生导致初始的样式有问题;