vue.js div无限滚动加载

1,054 阅读1分钟

html

 <div id="save">
        <div class="scroll">
            <br><br><br><br><br><br><br>
            sdhfiahdifashdifhid
            <span id="js_con"></span>
        </div>
    </div>

script

  mounted() {
    (也可以是特定的div)window.addEventListener('scroll', function() {
        var saveHeight = $('#save').height();//当前窗口的高度             
        var scrollTop = $('#save').scrollTop();//当前滚动条从上往下滚动的距离            
        var docHeight = $('.scroll').height(); //当前文档的高度 
        //当 滚动条距底部的距离 + 滚动条滚动的距离 >= 文档的高度 - 窗口的高度  
        //换句话说:(滚动条滚动的距离 + 窗口的高度 = 文档的高度)  这个是基本的公式  
        console.log(scrollTop,saveHeight,docHeight)
        if ((scrollTop + saveHeight)+100 >= docHeight) { 
            console.log("===加载更多数据===");
            $('.scroll').height($('.scroll').height() + 400);//加载数据代码
        }
    });
  }
  methods: {
    getInitialUsers() {
      for (var i = 0; i < 5; i++) {
        this.$ajax.get(`https://randomuser.me/api/`).then(response => {
          console.log(response);
          this.persons.push(response.data.results[0]);
        });
      }
    },
}