本教程讲解了微信小程序中如何解决图片懒加载?操作起来是很简单的，想要学习的朋友们可以跟着酷牛教程小编一起去看一看下文,希望能够帮助到大家。
先看特效：
我们将其拆分为如下几个步骤进行讲解~~
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代码：
<image src=\"{{arr[index] ? productArr[index].Image : \\\'default.jpg\\\'}}\"></image>
思路很明显，一开始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;
}
以上就是微信小程序中如何解决图片懒加载的全部内容了，大家都学会了吗?
本文来自投稿，不代表酷牛教程立场，如若转载，请注明出处：https://www.xukn.com/97448.html
