个索引初始值为-1图片列表滚动触底索引值自增然后将拆分好的图片id二位数组对应的数据读出来放到图片id的数组图片根据列表新增的id取读取每张图片的url并将读取到的url添加到图片列表中

图片的个数可能会有很多不能采用所有的图片都加载完成才开始渲染所以采用

技术点基础

addEventListener(“scroll”,fn,false)

scrollTop

元素内容的高度包含可视高度和滚动出去的高度scrollHeight

scrollTop

可以理解为同时处理多个promise的异步请求promise.all的入参是一个由多个promise组成的数组promise.all的回参是有传入promise数组中的每个返回值组成的数组返回值顺序与如参数顺序保持一致

递归处理数据

递归是在满足条件的情况下自己调用自己在不确定数据个数的情况下可采用递归处理

代码实现

scrollloadMoreImgFn/divloadMoreImgFn(ev)

{const

触底的业务逻辑self.handleImgData(currentIds);}}

getImgFileById(ele)

promise返回的对象并添加到数组中使用promise.all

处理上述数组拿到res

this.getImgFileById(ele);promiseList.push(imgP);});Promise.all(promiseList).***n((res)

{//

此处省略imgResList.push(item)})根据图片id数组获取图片列表数据进行渲染

技术点分析

是所有的promise都返返回了结果才会返回所有的值此处图片太多可能有几十张会等很久才出现图片因此采用一张图片一张图片渲染的模式技术点上采用递归的模式

代码实现

this.getImgFileById(fileId);this.showFiles.push(itemData)if

(this.currentFileId

{this.getImgFileByIdSingle(idList);}