本文主要是介绍微信小程-懒加载，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<a href="http://www.see-source.com:80/weixinwidget/downloadZip.html?wid=78">实例源码</a>
数据接口:
-
https://api.getweapp.com/vendor/lightstao/searchkey
-
https://api.getweapp.com/vendor/lightstao/product/search
微信小程序中，懒加载特效让人头疼不已，因为小程序完全没法操作dom，所以位置的操作在小程序中，变得极其的难~~
先看特效：
我们将其拆分为如下几个步骤进行讲解~~
1）如何获取图片的位置高度
先看一张图：
通过上图可以知道，图片位置高度其实可以通过img.height + margin值算出。
js代码：
1. arrHight[i] = Math.floor(i/2)*(img.height + margin-bottom); 为何是Math.floor(i/2)呢，因为同一排两张图片高度一样，比如i=0和i=1，通过Math.floor得出值都为0，所以可以保证同一排的两张图片位置高度是同一个值。
2）替换默认图片
先看效果图片：
wxml代码：
1. <image src="{{arr[index] ? productArr[index].Image : 'default.jpg'}}"></image> -
思路很明显，一开始arr[index]中都是false，所以默认都是default图片
-
但是随着往下移动，有些arr[index]的值变为true，所以替换默认图片
js代码：
1. for (var i = 0; i < this.data.productArr.length; i++) { 2. if (arrHight[i] < scrollTop) { 3. if (arr[i] == false) { 4. arr[i] = true; 5. } 6. } 7. } 思路相当清晰，无需多言~~
3）懒加载中渐显特效
先看效果：
wxss代码：
01. .product_image{ 02. opacity: 0; 03. width: 100%; 04. height: 70%; 05. transition: opacity 1s linear 2s; 06. } 07. .loaded{ 08. opacity: 1; 09. } 其实就是opacity的一个过渡动画而已，so easy~~
这篇关于微信小程-懒加载的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
