小程序圖片懶加載較完美解決方案

無需考慮數據結構，效果如圖

 

 

話不多說，先上代碼

 

1.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>

 

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