javascript - vue 滚动加载图片
阿神
阿神 2017-05-18 10:59:25
[JavaScript讨论组]

需求:滚动条下拉到底部的时候加载图片,一次加载6张图片,如果图片数量超过30个,那么加载结束后把最前面的6张图片去除掉,保持30个dom节点。

现在的是这样做的,在data里面设置一个imgarr=[]作为图片地址存储的数组,首先获取滚动元素的clientHeight、scrollTop、scrollHeight的值,并且添加一个变量开关isload = true,如果clientHeight + scrollTop > scrollHeight - 30,并且 isload是true,就去加载,然后把isload设置为false,然后把加载出来的图片地址添加到imgArr里面,现在遇到的问题是当图片的数量到了30张的时候,我把加载出来的图片concat到imgArr里面,然后在this.nextTick里面把imgArr里面的前面6个图片地址删除,发现滚动条不滚动了。经过查询知道this.nextTick的时候scrollHeight的值是之前的值,没有把加载出来的dom的高度算上,然后这时候就出问题了,请问有人遇到过这个问题么?

阿神
阿神

闭关修行中......

全部回复(2)
迷茫

this.nextTick 换成 this.setTimeout(,0)

我想大声告诉你

不如考虑下用插件:https://peachscript.github.io...

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号