小程序图片懒加载放在服务器,小程序图片懒加载较完美解决方案

无需考虑数据结构，效果如图

话不多说，先上代码

1.wxml

//listindex大于item.index时，图片显示

2.wxss

page {

background: #fff;

}

.pic-list {

width: 100vw;

background: #efeff4;

margin: 3vw 0;

}

.pic {

width: 100%;

display: block;

opacity: 0;

transition: opacity 0.3s linear 0.3s;

}

.action {

opacity: 1;

}

action添加一个简单的渐显动画

3.js

onshow: function () {

//获取屏幕尺寸

const screenwidth = wx.getsysteminfosync().windowwidth

const screenheight = wx.getsysteminfosync().windowheight

this.setdata({

//获取页面初始状态图片数量，0.63为图片容器的高度值(63vw)，将代码中0.63改为你的容器对应高度

listindex: screenheight / (screenwidth * 0.63),

screenwidth: screenwidth,

screenheight: screenheight

})

},

// 滚动事件

onpagescroll(e) {

//滚动距离+屏幕高度换算vw倍数

let listindex = (e.scrolltop + this.data.screenheight) / (this.data.screenwidth * 0.63)

this.setdata({

listindex: listindex

})

}

原理：通过onpagescroll() 方法返回的e.scrolltop值与手机窗口宽高进行计算，较完美的解决了等高或均高图片序列的图片懒加载。

关于图片高度：图片+容器宽高必须为vw取值，自适应的请用图片宽高比计算高度的vw值，替换js代码中的0.63

作者：zzppff

github链接：https://github.com/zzppff/zzppff-miniprogram

原创方法，商业转载请联系作者获得授权，非商业转载请注明出处。

---------------------

原文：https://blog.csdn.net/perfly_z/article/details/86611461