无需考虑数据结构，效果如图
话不多说，先上代码
- wxml
<view class="content"> <block wx:key="{{img}}" wx:for="{{img}}"> <view class="pic-list"> //listIndex大于item.index时，图片显示 <image src="{{ listIndex > index ? item : '' }}" class="pic {{listIndex > index ?'Action':''}}" mode="widthFix" /> </view> </block></view>- 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添加一个简单的渐显动画
- 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
原创方法，商业转载请联系作者获得授权，非商业转载请注明出处。
