小程序懒加载

  <block  wx:for="{{img}}" wx:key="index">
    <view class="pic-list">
      <!-- //listIndex大于item.index时，图片显示 -->
      <image src="{{ listIndex > index ? item : '' }}" class="pic {{listIndex > index ?'Action':''}}" mode="widthFix" />
    </view>
  </block>

//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
    img: ['http://img7.ng8855.com/ima/2022/01/19/fqy1nt.jpg', 'http://img7.ng8855.com/ima/2022/01/19/fqy1nt.jpg', 'http://img7.ng8855.com/ima/2022/01/19/fqy1nt.jpg','http://img7.ng8855.com/ima/2022/01/19/fqy1nt.jpg', 'http://img7.ng8855.com/ima/2022/01/19/fqy1nt.jpg', 'http://img7.ng8855.com/ima/2022/01/19/fqy1nt.jpg','http://img7.ng8855.com/ima/2022/01/19/fqy1nt.jpg', 'http://img7.ng8855.com/ima/2022/01/19/fqy1nt.jpg', 'http://img7.ng8855.com/ima/2022/01/19/fqy1nt.jpg'],

  },
  onShow: function () {
    //获取屏幕尺寸
    const screenWidth = wx.getSystemInfoSync().windowWidth
    const screenHeight = wx.getSystemInfoSync().windowHeight
    this.setData({
      //获取页面初始状态图片数量，0.63为图片容器的高度值(63vw)，将代码中0.63改为你的容器对应高度
      listIndex: screenHeight / (screenWidth * 0.49),
      screenWidth: screenWidth,
      screenHeight: screenHeight
    })
  },
  // 滚动事件 
  onPageScroll(e) { 
    //滚动距离+屏幕高度换算vw倍数
    let listIndex = (e.scrollTop + this.data.screenHeight) / (this.data.screenWidth * 0.49)
    if (listIndex > this.data.listIndex) { // 防止向上滑动后再向下滑再次出现重新加载情况
	    this.setData({
	      listIndex: listIndex
	    })
    }
  }

 
})

 .pic-list {
  width: 100vw;
  background: #efeff4;
  margin: 3vw 0;
 }
 .pic {
  width: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.3s linear 0.3s;
 }
 .Action {
  opacity: 1;
 }