javascript - vue 滾動載入圖片
阿神
阿神 2017-05-18 10:59:25
0
2
666

需求:滾動條下拉到底部的時候加載圖片,一次加載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的高度算上,然後這時候就出問題了,請問有人遇到過這個問題麼?

<template>
  <p class="content">
    <ul class="imglist">
      <li class="imgli"  v-for="(item,index) in imgarr" v-lazy:background-image="item" >{{index}}</li>
    </ul>
  </p>
</template>
<script>
 export default{
    data(){
      return {
        imgarr: [
          'https://img.alicdn.com/tfs/TB1H7PtQVXXXXbzXVXXXXXXXXXX-750-1206.jpg',
          'https://img.alicdn.com/tfs/TB1H7PtQVXXXXbzXVXXXXXXXXXX-750-1206.jpg',
          'https://img.alicdn.com/tfs/TB10SDQQVXXXXaBXFXXXXXXXXXX-1440-800.jpg',
          'https://img.alicdn.com/tfs/TB14BS4QVXXXXcmXpXXXXXXXXXX-706-1077.jpg',
          'https://img.alicdn.com/tfs/TB1ffqxQVXXXXcpXpXXXXXXXXXX-706-1077.jpg'
        ],
        isload:true
      }
    },
    mounted(){
      const self = this;
      const clientHeight = document.querySelector(".imglist").clientHeight;
      const loadpoint = document.querySelector('.imgli').clientHeight * 0.15;

      document.querySelector('.imglist').addEventListener("scroll",function(){
        let scrollTop =  document.querySelector(".imglist").scrollTop;
        let scrollHeight = document.querySelector(".imglist").scrollHeight;
        if(clientHeight + scrollTop > scrollHeight - loadpoint && self.isload == true){
            self.isload = false;
            let newimgArr = [
              'https://img.alicdn.com/tfs/TB1ufH9QVXXXXXOXXXXXXXXXXXX-1440-800.jpg',
              'https://img.alicdn.com/tfs/TB1ufH9QVXXXXXOXXXXXXXXXXXX-1440-800.jpg',
              'https://img.alicdn.com/tfs/TB1ffqxQVXXXXcpXpXXXXXXXXXX-706-1077.jpg',
              'https://img.alicdn.com/tfs/TB1Gqh3QVXXXXXsapXXXXXXXXXX-750-940.jpg',
              'https://img.alicdn.com/tfs/TB1p7FZQVXXXXclXVXXXXXXXXXX-200-200.png'
            ];
            self.imgarr = self.imgarr.concat(newimgArr);
            console.log(scrollHeight)//1153
            self.$nextTick(function(){
              let scrollHeight = document.querySelector(".imglist").scrollHeight;
              console.log(scrollHeight)//如果没有上面那句话就是1153,如果有就是2307
            })
        }
        if(scrollTop < 0){

        }
      },false);
    },
</script>
阿神
阿神

闭关修行中......

全部回覆(2)
迷茫

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

我想大声告诉你

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板