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做的微信小程序,但归根结底也是微信小程序啊!!!老拿着以前的经验来处理未知的东西,这个得注意一下

 

posted @ 2022-01-04 18:13  程序员笔记--vue  阅读(4795)  评论(0编辑  收藏  举报