微信小程序实现图片懒加载的懒办法（思路参考）

微信小程序中，由于没有办法实现DEMO操作，位置的操作在小程序中很难进行，所以要实现图片的懒加载是真的难啊（简直操碎了心~~）！！！

懒加载的实现无非就那几个办法，说白了就是按需加载、监听滚动条加载、延时加载。。。

说明：此方法只适用于有明确统一高度的图片排列！

不说那么多了，直接上方法了

首先，我们在本地先放上一张图片（index.png），然后我们再来看张图片~~嘤嘤嘤

图中每个模块的高度应该是Demo的高度=图片的高度+文字描述内容节点高度+maigin-bottom

知道高度的计算之后就好办了

微信小程序Page中的onPageScroll方法直接提供了监听页面滑动距离的方法（这就很舒服）

page({    data:{        damoHeight: '100',//demo高度    },    onPageScroll: function (res) {        console.log(res.scrollTop);    }})

由此得到页面的滚动距离。不过这个方法在WEB开发工具中不是很好用，在用鼠标滚轮滚动的过程中，这个方法的触发感觉不是很灵敏，不晓得是不是个别原因。还有，就是如果在这个方法中写一些精密的判断话，尽量少写一点，毕竟页面滑动的时候，会一直触发这个方法，难保不会出错。

知道了demo的高度，页面的滚动距离之后，剩下的就是数据的渲染了

把后台返回的图片地址赋值到一个全局数组变量中，并且同时创建一个长度和此数组一样的数组，里面全放上false，备用

page({    data:{        damoHeight: '100',//demo高度        imgUrls: [//图片地址          {           url: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'          }, {            url: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'          }        ],        arry:[false,false],    },    onPageScroll: function (res) {        console.log(res.scrollTop);    }})

wxml中这样写

<image src="{{arry[index] ? imgUrls[index].url: 'index.png'}}"></image>

用本地的图片形成一个占位符效果，然后由arry中对应下标的false和true来控制image 标签的路径是本地的还是imgUrls中的，然后在onPageScroll中，用屏幕滑动的距离/Demo的高度，在取整，得到的整数就是arry中需要变成true的下标

page({    data:{        damoHeight: '100',//demo高度        imgUrls: [//图片地址          {           url: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'          }, {            url: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'          }        ],        arry:[false,false],    },    onPageScroll: function (res) {        var _this = this;        //console.log(res.scrollTop);        var str = parseInt(res.scrollTop / _this.data.damoHeight);        _this.data.arry[str] = true;        _this.setData({            arry:_this.data.arry        })    }})

搞定，其实也不是什么很复杂的东西，这就是一种另类一点的实现方式罢了，当然里面的一些高度的判断，屏幕的滚动距离还是需要自己去计算滴。。。至于照片的显示动画就自己加上去就好，我的话就这样写

image{  opacity: 0;  width: 100%;  height: 70%;  transition: opacity 1s linear 2s;}.Action{    opacity: 1;}

简单的淡入淡出，好了，打完收工，不扯淡了，继续填坑去。。。