uniapp圖片懶加載


近期用uniapp做微信小程序,遇到了圖片懶加載的設計

之前玩過webapp,還是用的vue開發,因此第一反應就是vue-lazyload,結果發現不行!!!

也是傻了,uniapp雖說是用的vue開發的,但最終生成的是小程序啊0.0,小程序渲染的img標簽都跟正常的不一樣,咋會想到他呢,也真是傻了

解決方案: 在uniapp插件市場中找到了個easy-loadimage,這個插件還是比較不錯的(下載次數較多,用起來比較方便)

注: 在組件初始化的時候,組件內mounted方法執行的init,給uid賦值,然后再nextTick內執行onscroll方法,這個方法內 query.select('#'+id).boundingClientRect(data => {}) data值為空,也就是說,此時dom結構上並沒有響應的id

組件內修改: 將組件的mounted內的this.uid賦值放到created生命周期中,即可在初始化的時候拿到dom

總結: 雖說uniapp是用vue做的微信小程序,但歸根結底也是微信小程序啊!!!老拿着以前的經驗來處理未知的東西,這個得注意一下

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM