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

首先，我们在本地先放上一张图片（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;
}

简单的淡入淡出