报错内容
在这里插入图片描述

Uncaught TypeError: Cannot read property 'bottom' of null
    at a (chunk-vendors.js:319)
    at chunk-vendors.js:319
    at Array.forEach (<anonymous>)
    at IntersectionObserver.s.<computed>.IntersectionObserver.root (chunk-vendors.js:319)

原因
监听的元素找不到了
PS: 似乎只有在h5平台才会从出现

解决方法
在页面的隐藏和卸载生命周期中,取消对元素的监听

onHide:function(){
	this.observer.disconnect();//取消监听
},
onUnload: function(){
	this.observer.disconnect();//取消监听
},

在监听时判断元素是否存在,并且清除上次的监听

Vue.prototype.$lazyImg = function(fn){
	this.observer.disconnect();//必须清除之前的。不然已经加载的元素依旧会监听,或者监听的元素消失了,就会报错
	uni.createSelectorQuery().in(this).selectAll('.lazy').boundingClientRect(data => {
		if(data.length > 0){//如果页面没有lazy元素,直接就报错,真TM离谱
			this.observer.observe('.lazy', (res) => {
				if(res.intersectionRatio > 0){//发现有时候intersectionRatio等于undefined的
					fn(res.dataset)
				}
			})
		}
	}).exec();
}
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐