Error content
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)
Cause
the listening element cannot be found
PS: it seems that it only appears from the H5 platform
Solution
in the hide and unload life cycle of the page, cancel listening to elements
onHide:function(){
this.observer.disconnect();
},
onUnload: function(){
this.observer.disconnect();
},
Judge whether the element exists during listening, and clear the last listening
Vue.prototype.$lazyImg = function(fn){
this.observer.disconnect();//The previous ones must be cleared. Otherwise, elements that have been loaded will still be listened to, or if the listened to elements disappear, an error will be reported
uni.createSelectorQuery().in(this).selectAll('.lazy').boundingClientRect(data => {
if(data.length > 0){//If there is no lazy element on the page, it will report an error directly, which is really fucking outrageous!
this.observer.observe('.lazy', (res) => {
if(res.intersectionRatio > 0){//sometimes, intersectionRatio is undefined
fn(res.dataset)
}
})
}
}).exec();
}
