vue滚动自动加载

[plain]  view plain  copy

 print ?

1. <template>  
2.     <div>  
3.         <ul>  
4.             <li v-for="item in articles">  
5.                 <h2>{{item.title}}</h2>  
6.                 <img :src="item.images" alt="">  
7.             </li>  
8.         </ul>  
9.     </div>  
10. </template>  
11. <script>  
12.     import axios from 'axios';  
13.     export default{  
14.         data(){  
15.             return {  
16.                 articles : []  
17.             }  
18.         },  
19.         mounted(){  
20.             // 缓存指针  
21.             let _this = this;  
22.             // 设置一个开关来避免重负请求数据  
23.             let sw = true;  
24.             // 此处使用node做了代理  
25.             axios.get('http://localhost:3000/proxy?url=http://news-at.zhihu.com/api/4/news/latest')  
26.                 .then(function(response){  
27.                     // console.log(JSON.parse(response.data).stories);  
28.                     // 将得到的数据放到vue中的data  
29.                     _this.articles = JSON.parse(response.data).stories;  
30.                 })  
31.                 .catch(function(error){  
32.                     console.log(error);  
33.                 });  
34.   
35.             // 注册scroll事件并监听  
36.             window.addEventListener('scroll',function(){  
37.                 // console.log(document.documentElement.clientHeight+'-----------'+window.innerHeight); // 可视区域高度  
38.                 // console.log(document.body.scrollTop); // 滚动高度  
39.                 // console.log(document.body.offsetHeight); // 文档高度  
40.                 // 判断是否滚动到底部  
41.                 if(document.body.scrollTop + window.innerHeight >= document.body.offsetHeight) {  
42.                     // console.log(sw);  
43.                     // 如果开关打开则加载数据  
44.                     if(sw==true){  
45.                         // 将开关关闭  
46.                         sw = false;  
47.                         axios.get('http://localhost:3000/proxy?url=http://news.at.zhihu.com/api/4/news/before/20170608')  
48.                             .then(function(response){  
49.                                 console.log(JSON.parse(response.data));  
50.                                 // 将新获取的数据push到vue中的data，就会反应到视图中了  
51.                                 JSON.parse(response.data).stories.forEach(function(val,index){  
52.                                     _this.articles.push(val);  
53.                                     // console.log(val);  
54.                                 });  
55.                                 // 数据更新完毕，将开关打开  
56.                                 sw = true;  
57.                             })  
58.                             .catch(function(error){  
59.                                 console.log(error);  
60.                             });     
61.                     }  
62.                 }  
63.             });  
64.         }  
65.     }  
66. </script>  
67. <style lang="less">  
68.     *{  
69.         margin:0;  
70.         padding:0;  
71.     }  
72.     li{  
73.         list-style:none;  
74.     }  
75. </style>