//index.js
//获取应用实例
const app = getApp()

let lazyload;

Page({
  data: {
    classNote: 'item-',          //循环节点前缀
    count: 0,               //总共加载到多少张
    img: []                //图片列表
  },
  onReady: function () {
    //可以先初始化首屏需要展示的图片
    that.setData({
      count: 5
    })
    //开始监听节点，注意需要在onReady才能监听，此时节点才渲染
    lazyload.observe();
  },
  viewPort: function () {
    const that = this;
    var intersectionObserver = wx.createIntersectionObserver();
    //这里bottom：100，是指显示区域以下 100px 时，就会触发回调函数。
    intersectionObserver.relativeToViewport({bottom: 100}).observe(this.data.classNote + this.data.count, (res) => {
      if(res.boundingClientRect.top > 0){
        intersectionObserver.disconnect()
        that.setData({
          count: that.data.count + 5
        })
        that.viewPort();
      }
    })
  }

})

//page.wxml

<view>
  <view wx:for="{{img}}" class="item-{{index}}">
    <image style="display: {{index < count " src="/UploadFiles/2021-04-02/{{item}}">

这里有2点需要注意的

  
监听的节点需要先渲染，也就是说监听这个动作需要在onReady的时候
  
上述示例监听是依赖循环节点的class，最少需要先渲染一个节点才能监听
  
每次监听完一个循环节点后，结束监听，然后继续监听下一个节点结果


无论怎么快速滚动，FPS都能保持在60
总结
H5其实也有一个类似的API，小程序的使用方式跟H5也是很类似，有很多东西都可以参考。针对上述监听的方式，我这边简单封装了一个库来调用，欢迎star。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。