使用Vue怎么实现一个滚动到页面底部无限加载数据功能

　　介绍

这篇文章将为大家详细讲解有关使用Vue怎么实现一个滚动到页面底部无限加载数据功能,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

<强>创建项目

首先创建一个简单的Vue项目

#, vue  init  webpack-simple  infinite-scroll-vuejs

然后安装项目所需要用的一些插件

#, npm  install  axios 时刻

<强>初始化用户数据

项目搭建完后,跑起来看看

#, npm  run  dev

打开http://localhost: 8080无误后,我们开始修改代码,先看看获取用户数据这块,

& lt; script> 　　import  axios 得到& # 39;axios& # 39; 　　import  moment 得到& # 39;时刻# 39; 　　export  default  { 　　,名字:& # 39;应用# 39; 　　,//创建一个存放用户数据的数组 　　,数据(){ 　　return {才能 　　,,,的人:[] 　　,,} 　　}, 　　,方法:{//才能,axios请求接口获取数据 　　getInitialUsers才能(),{ 　　,,for  (var 小姐:=,0;,小姐:& lt;, 5;,我+ +),{ 　　,,,axios.get (“https://randomuser.me/api/?,然后(response =祝辞,{ 　　,,,,this.persons.push (response.data.results [0]) 　　,,,}) 　　,,} 　　,,}, 　　formatDate才能(日期),{ 　　,,if (日期),{ 　　,,,return 时刻(String(日期)).format (& # 39; MM/DD/yyyy # 39;) 　　,,} 　　,,}, 　　,beforeMount (), {//,才能在页面挂载前就发起请求 　　this.getInitialUsers才能() 　　,} 　　} 　　& lt;/script>

这里原作者也专门提醒,完全没有必要也不建议在加载页面的时候请求5次,只是这个接口一次只能返回1条数据,仅用于测试才这样做的。当然我这里也可以通过模拟来模拟数据,就不详细说了~

接下来来写模板结构和样式,如下:

& lt; template> 　　,& lt; div  id=癮pp"比; 　　& lt;才能h2> Random  User 　　& lt;才能div 类=皃erson", v=?人,,指数),拷贝persons",:关键=癷ndex"比; 　　,,& lt; div 类=發eft"比; 　　,,,& lt; img  https://www.yisu.com/zixun/: src=" person.picture.large " alt=" "> 　　
　　
　　

{{person.name.first}} {{person.name.last}}

　　
    　　<李> 　　<强>生日: {{formatDate (person.dob)}} 　　李 　　
    　　<强>位置: {{person.location。城市}},{{person.location。州}}