自從跳一跳出現之后小程序又開始頻繁出現了，在學習過程中發現小程序雖然好但是由於api不完善導致開發過程中有很多的坑，重點是網上相對小程序出現坑時解決方案顯然比較少，小程序最讓人覺得痛心疾首之一就是無法引入插件，很多插件功能都只能自己寫，這就令人尷尬了。比如圖片懶加載，在vue里就有vue-lazyload插件，直接一條代碼完事了，而這里只能自己寫了，好了說正事兒，先看效果：
思路是這樣的：圖片列表展示數據是一個數組，在后台請求回來數據時我們定義一個和圖片列表數組長度一樣的數組arr，里面的元素都是布爾值false；再定義一個數組arrHeight用於存放每個圖片相對於頂部的高度值。通過滾動監聽每個圖片高度值是否小於滾動條高度，從而改變數值arr里對應的布爾值。然后頁面的image組件通過對src設置三目運算來判斷是展示默認圖片還是實際圖片。
里面涉及到的api我就不詳說了，可以去小程序開發文檔查具體用法。以下是具體代碼：
html代碼：
js代碼：
注：第28行的延時實際上是等待image組件加載圖片然后初始化獲取單個圖片高度，image組件有一個bindload屬性，但是這個屬性是有一個圖片加載就會執行一次，在這里做獲取就會獲取N次，不利於性能優化;
第50行的i/2是因為每行有兩張圖片，這兩張的高度是一樣的，所以Math.floor(i / 2)，加10是我上下圖片之間的margin值;
第57行
如果不加上 app.globalData.windowHeight 那效果就是一滾動加載的不是底部的兩張圖片而是頂部的兩張圖片，大家可以試一下效果;
在此圖片懶加載效果已實現，這里並不是滾動到了某張圖片的位置然后向后台請求圖片數據再加載出來，其實本質上圖片早就已經全部加載了，只是通過滾動到位置再顯示，達到懶加載的效果，希望能對你們有所幫助。
如需轉載請注明出處：
http://www.cnblogs.com/zishang91/p/8507485.html，以便有錯誤可以及時修改，若有錯漏不足之處，請見諒並且指點，謝謝！！！