vue 原生添加滚动加载更多
   vue中添加滚动加载更多，因为是单页面所以需要在跳出页面时候销毁滚动，要不会出现错乱。我们在mounted建立滚动，destroyed销毁滚动。

1
2
3
4
5
6
mounted () {
    window.addEventListener('scroll', this.handleScroll)
},
destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
},
　　定义一个函数，在滚动到底部时候使滚动条距离顶部距离与可视区域高度之和等于滚动条总高度，在加载后如果列表长度为0时应该停止加载，要不会出现一直加载的情况

1
2
3
4
5
6
7
8
9
10
11
12
handleScroll () {
       //变量scrollTop是滚动条滚动时，距离顶部的距离
       var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
       //变量windowHeight是可视区的高度
       var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
       //变量scrollHeight是滚动条的总高度
       var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
       //滚动条到底部的条件
       if(scrollTop+windowHeight==scrollHeight &&this.list.length !==0){
           this.loadMore() // 加载的列表数据
       }
   }

有任何问题欢迎在评论区留言

或者添加学姐微信
DKA-2018