微信小程序实现图片懒加载的懒办法_微信小程序怎么实现图片懒加载

首先，我们在本地先放上一张图片（index.png）

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

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

微信小程序Page中的onPageScroll方法直接提供了监听页面滑动距离的方法

用本地的图片形成一个占位符效果，然后由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
 
})
 
}})
 

wxml中这样写

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

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

简单的淡入淡出