【JS】滚动加载

前端获取到的数据很多的时候，如果数据量很大，往往不能一次性加载出来，如果页面不做分页的话，可以采取这种滚动加载的方式。

以下面这张图所展示的网页举例，单独对某一个页面进行滚动监听则可以达到滚动加载的效果。

代码如下：

HTML代码

<duties-card-list class="wrap" id="btn" :dataList="dataList" @getList="getList(1)">
</duties-card-list> 
//需要加上id=“btn”，方便后面获取元素高度

js代码

  mounted() {
    // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
    window.addEventListener('scroll', this.handleScroll, true)
  },
  // 离开这个页面销毁滚动条事件，不然会给每一个页面都触发
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll, true)
  },
  methods(){
    //滚动事件-触底
    handleScroll() {
      //1.获取滚动区域元素
      let btn = document.getElementById('btn')
      if (btn) {
        //2.获取元素高度