Ready

  本教程讲解了微信小程序中如何解决图片懒加载?操作起来是很简单的，想要学习的朋友们可以跟着小编一起去看一看下文,希望能够帮助到大家。

  先看特效：

  我们将其拆分为如下几个步骤进行讲解~~

  1)如何获取图片的位置高度

  先看一张图：

  通过上图可以知道，图片位置高度其实可以通过img.height + margin值算出。

  js代码：

  arrHight[i] = Math.floor(i/2)*(img.height + margin-bottom);

  为何是Math.floor(i/2)呢，因为同一排两张图片高度一样，比如i=0和i=1，通过Math.floor得出值都为0，所以可以保证同一排的两张图片位置高度是同一个值。

  2)替换默认图片

  先看效果图片：

  wxml代码：

  

  思路很明显，一开始arr[index]中都是false，所以默认都是default图片

  但是随着往下移动，有些arr[index]的值变为true，所以替换默认图片

  js代码：

  for (var i = 0; i < this.data.productArr.length; i++) {

  if (arrHight[i] < scrollTop) {

  if (arr[i] == false) {

  arr[i] = true;

  }

  }

  }

  思路相当清晰，无需多言~~

  3)懒加载中渐显特效

  先看效果：

  wxss代码：

  .product_image{

  opacity: 0;

  width: 100%;

  height: 70%;

  transition: opacity 1s linear 2s;

  }

  .loaded{

  opacity: 1;

  }

 以上就是微信小程序中如何解决图片懒加载的全部内容了，大家都学会了吗?

End