vue项目上滑滚动加载更多&下拉刷新

上滑滚动时获取内容高度、屏幕高度和滚动高度（此处#sslist要为内容是id）

内容高度  let innerHeight = document.querySelector("#sslist").clientHeight; 

屏幕高度 let outerHeight = document.documentElement.clientHeight;
滚动高度 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;

代码：

 1 <template>
 2     <div id="sslist">
 3         <div class="readlist main">
 4             <div class="read">
 5                 <h4 class="regulartitle"><i>S-SENTENCE - {{readcount}}</i><router-link to="/ssadd">addsentence</router-link></h4>
 6                 <ul class="booklist">
 7                     <li v-for="(item, index) in readLists">
 8                         {{item.content}}
 9                     </li>
10                 </ul>
11             </div>
12         </div>
13         <div v-if="has_log == 0">
14             <span>上拉加载</span>
15         </div>
16         <div v-if="has_log == 1">
17             <span>正在加载</span>
18         </div>
19         <div v-if="has_log == 2">
20             <span>没有更多数据了</span>
21         </div>
22     </div>
23 </template>
24 <script>
25     export default{
26         name: 'sslist',
27         data(){
28             return {
29                 readLists: [],
30                 readcount: '',
31                 list_param:{
32                     page: 1,
33                     pageLimit: 20
34                 },
35                 totalpages: 0, //总页数
36                 has_log: 0, //显示提示 0-上拉加载 1-正在加载 2-没有更多数据了
37                 no_data: false //是否还有数据
38             }
39         },
40         mounted(){
41             this.getList();
42 
43             window.addEventListener('scroll', this.onScroll);
44         },
45         methods: {
46             onScroll(){
47                 this.has_log = 1;
48                 let innerHeight = document.querySelector("#sslist").clientHeight;
49                 let outerHeight = document.documentElement.clientHeight;
50                 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
51 
52                 console.log(innerHeight + ' ' + outerHeight + ' ' + scrollTop);
53 
54                 if(outerHeight + scrollTop === innerHeight){
55                     if(this.no_data === true){
56                         this.has_log = 2;
57                         return false;
58                     }
59 
60                     this.getList();
61 
62                 }
63 
64                 if(scrollTop < 0){
65                     this.list_param.page = 1;
66                     this.getList();
67                 }
68             },
69             getList(){
70                 var that = this;
71                 this.axios.get("http://127.0.0.1/api/singlesentence/getlist.php",{params:that.list_param}).then((ret)=>{
72                     if(ret.status == 200){
73                         if(that.list_param.page == 1){
74                             that.readLists = ret.data.lists;
75                         }else{
76                             that.readLists = that.readLists.concat(ret.data.lists);
77                         }
78 
79                         if(that.list_param.page < ret.data.totalpages){
80                             that.list_param.page += 1;
81                         }else{
82                             that.no_data = true;
83                         }
84 
85                         that.readcount = ret.data.count;
86                         that.totalpages = ret.data.totalpages;
87                     }
88                 })
89             }
90         }
91     }
92 </script>
93 <style>
94 </style>

View Code