思路一：使用IntersectionObserver
这个方法的实现也同样是借助小程序的API实现：用于推断某个元素被用户看见，多大比例看见
一：实现效果：
相对于某个元素效果实现（举例小球在某个元素中出现，实现在某个元素中的下拉刷新）：
相对于整个页面元素效果实现（相对于整个页面，拉到距离底部多少距离可见时刷新）：
二、实现步骤：
1、创建观察者对象：
const this._observer=wx.createIntersectionObserver()
2、设置参照对象（两种选择）
a、this._oserver.relativeTo("#dom || .dom") // 选择一个dom元素，意思就是相对某个元素可见
b、this._oserver.relativeToViewport() //指定页面显示区域作为参照区域之一
3、设置被观察对象
this._observer.relativeToViewport().observe('dom',(res)=>{
console.log('res:是观察的结果:',res)
boundingClientRect：目标边界。这个目标，就是我们的观察对象，可以看到刚开始相交的时候，它的位置情况。这个位置是相对于整个页面的，不是相对于参照元素的。top = 251(px) = scroll-view的高度(200px) + "小球消失/出现"message的高度(52px) - 相交高度(1px)
dataset: 观察对象携带的数据。
id:观察对象的id，它与上面的dataset多使用于一次观察多个对象的场景，用于区分不同的对象。
intersectionRatio 相交比例：大于0的话表示两者有了交集，等于1的话表示两者已经完全相交。
intersectionRect 相交区域: 可以看出此时只有1px的高度有交集。
relativeRect：参照区域的边界。通过其上下左右四个属性值可以看出它就是scroll-view组件在页面中的位置。
time: 监测到两者相交时的时间戳，不太有用。
})
4、页面卸载，要销毁观察,否则重新进入页面则无法重现观察结果
$\color{red}{this._observer.disconnect()}$
三、具体实现方法： 1、onload
