小程序图片懒加载较完美解决方案

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

小程序图片懒加载较完美解决方案
话不多说，先上代码

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添加一个简单的渐显动画

 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
原创方法，商业转载请联系作者获得授权，非商业转载请注明出处。

小程序图片懒加载较完美解决方案

相关推荐