微信小程序图片懒加载实现

实现思路

首先设立一个数组都为false，让图片的高度和屏幕滚动的高度进行比较，当到达这个点的时候，数组里面对应的false变成true。当数组的false变成true的时候，我们让图片进行显示就可以啦。当然，首先我们需要判断一下首屏能容纳多少个图片，然后把他们显示出来。代码如下：

wxml

  
 /*  "item.pic" 真实数据  */         /*  "item.pic" : 冒号后面跟设置懒加载的图片  */
        
 

js

 data: {
    damoHeight: '150',//demo高度
    arry: [false],//图片懒加载默认不显示
  },
  
  //获取滚动的距离
  onPageScroll: function (res) {
    console.log(res)
    var _this = this;
    var str = parseInt(res.scrollTop / _this.data.damoHeight);
    _this.data.arry[str] = true;
    _this.setData({
      arry: _this.data.arry
    })
  },
  onLoad: function () {
	//图片懒加载 
    let _this = this;
    let num = Math.ceil(wx.getSystemInfoSync().windowHeight / 300);
    for (let i = 0; i < num; i++) {
      _this.data.arry[i] = true;
    };
    this.setData({
      arry: _this.data.arry
    })
}

wxss

image {
  opacity: 0;
  width: 100%;
  height: 300px;
  transition: opacity 0.4s linear 0.4s;
}
 
.Action {
  opacity: 1;
}