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