使用Vue怎么实现一个滚动到页面底部无限加载数据功能-创新互联
这篇文章将为大家详细讲解有关使用Vue怎么实现一个滚动到页面底部无限加载数据功能,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
员工经过长期磨合与沉淀,具备了协作精神,得以通过团队的力量开发出优质的产品。创新互联坚持“专注、创新、易用”的产品理念,因为“专注所以专业、创新互联网站所以易用所以简单”。公司专注于为企业提供网站建设、成都网站设计、微信公众号开发、电商网站开发,小程序制作,软件按需开发等一站式互联网企业服务。创建项目
首先创建一个简单的vue项目
# vue init webpack-simple infinite-scroll-vuejs
然后安装项目所需要用的一些插件
# npm install axios moment
初始化用户数据
项目搭建完后, 跑起来看看
# npm run dev
打开http://localhost:8080无误后, 我们开始修改代码, 先看看获取用户数据这块,
这里原作者也专门提醒, 完全没有必要也不建议在加载页面的时候请求5次, 只是这个接口一次只能返回1条数据, 仅用于测试才这样做的. 当然我这里也可以通过Mock来模拟数据, 就不详细说了~
接下来来写模板结构和样式, 如下:
Random User
{{ person.name.first}} {{ person.name.last }}
- Birthday: {{ formatDate(person.dob)}}
Location: {{ person.location.city}}, {{ person.location.state }}
这样页面就能显示5个人的个人信息了.
处理无限滚动加载逻辑
我们接下来需要在methods里面添加scroll()来监听滚动, 并且这个事件是应该在mounted()这个生命周期内的. 代码如下:
关于使用Vue怎么实现一个滚动到页面底部无限加载数据功能就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站名称:使用Vue怎么实现一个滚动到页面底部无限加载数据功能-创新互联
本文URL:http://ybzwz.com/article/djpdes.html