微信小程序懒加载

本文章只提供一种解决方法，后续怎么操作就要看业务需求了。

1：IntersectionObserver 使用

创建并返回一个 IntersectionObserver 对象实例

this._observer = wx.createIntersectionObserver(this)

该对象提供了几个方法。

①：relativeTo

被动触发的对象。

②：observe

主动触发的对象

this._observer
      .relativeTo('.center')
      .observe('.hello', (res) => {
    })
      

2：页面

为了便于演示，我们将主动触发对象放置于屏幕外。
被动触发对象固定置于屏幕。

wxml

<view class="center" style="background:{{background}};">---------------------------------------------------------------------------------------------</view>

<view style="height:1500rpx;"></view>

<view class="hello">hello++++++++++++++++++++++++++++++++++</view>

<view style="height:1500rpx;"></view>

wxss

.center{
  position: fixed;
  top:50%;
}

3：事件

当两个组件相交时会触发事件。

相交时：intersectionRatio>0
分离时：intersectionRatio=0

this._observer = wx.createIntersectionObserver(this)
    this._observer
      .relativeTo('.center')
      .observe('.hello', (res) => {
        if (res.intersectionRatio>0){
        
          //相交
          this.setData({
            background:"#ff9900"
          })
          
        }else{
        
          //分离
          this.setData({
            background: ""
          })
          
        }
      })
      

合理运用IntersectionObserver可以实现一些基于懒加载，组件出现在屏幕再加载图片等相应的功能。