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