javascript - vue scrolling loading images
阿神
阿神 2017-05-18 10:59:25
0
2
580

Requirements: Load pictures when the scroll bar is pulled down to the bottom. Load 6 pictures at a time. If the number of pictures exceeds 30, then remove the first 6 pictures after the loading is completed and keep 30 dom nodes.

This is how it is done now. Set an imgarr=[] in the data as an array to store the image address. First get the values of clientHeight, scrollTop, and scrollHeight of the scroll element, and add a variable switch isload = true. If clientHeight scrollTop > scrollHeight - 30, and isload is true, load it, then set isload to false, and then add the loaded image address to imgArr. The problem now is when the number of images reaches 30 , I concat the loaded image into imgArr, and then delete the first 6 image addresses in imgArr in this.nextTick, and find that the scroll bar does not scroll. After querying, I found that the value of scrollHeight when this.nextTick was the previous value, and the height of the loaded dom was not included. Then a problem occurred at this time. Has anyone encountered this problem?

阿神
阿神

闭关修行中......

reply all (2)
迷茫

this.nextTick is replaced by this.setTimeout(,0)

    我想大声告诉你

    Why not consider using a plug-in: https://peachscript.github.io...

      Latest Downloads
      More>
      Web Effects
      Website Source Code
      Website Materials
      Front End Template
      About us Disclaimer Sitemap
      php.cn:Public welfare online PHP training,Help PHP learners grow quickly!