Vue下滚动到页面底部无限加载数据的示例代码


Posted in Javascript onApril 22, 2018

看到一篇Implementing an Infinite Scroll with Vue.js , 觉得挺实用的就看了下, 顺便简单翻译了一下给需要的人参考.

从这个项目中可以加深对Vue的生命周期的理解, 何时开始axios请求, 如何结合Vue使用原生js来写scroll事件等等, 我这里主要是对原文的重点提取和补充

本文技术要点

  1. Vue生命周期
  2. axios简单用法
  3. moment.js格式化日期
  4. 图片懒加载
  5. 结合原生js来写scroll事件
  6. 请求节流

创建项目

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

# vue init webpack-simple infinite-scroll-vuejs

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

# npm install axios moment

初始化用户数据

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

# npm run dev

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

<script>
import axios from 'axios'
import moment from 'moment'
export default {
 name: 'app',
 // 创建一个存放用户数据的数组
 data() {
  return {
   persons: []
  }
 },
 methods: {
  // axios请求接口获取数据
  getInitialUsers() {
   for (var i = 0; i < 5; i++) {
    axios.get(`https://randomuser.me/api/`).then(response => {
     this.persons.push(response.data.results[0])
    })
   }
  },
  formatDate(date) {
   if (date) {
    return moment(String(date)).format('MM/DD/YYYY')
   }
  },
 beforeMount() {
  // 在页面挂载前就发起请求
  this.getInitialUsers()
 }
}
</script>

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

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

<template>
 <div id="app">
  <h1>Random User</h1>
  <div class="person" v-for="(person, index) in persons" :key="index">
   <div class="left">
    <img :src="person.picture.large" alt="">
   </div>
   <div class="right">
    <p>{{ person.name.first}} {{ person.name.last }}</p>
    <ul>
     <li>
      <strong>Birthday:</strong> {{ formatDate(person.dob)}}
     </li>
     <div class="text-capitalize">
      <strong>Location:</strong> {{ person.location.city}}, {{ person.location.state }}
     </div>
    </ul>
   </div>
  </div>
 </div>
</template>

<style lang="scss">
.person {
 background: #ccc;
 border-radius: 2px;
 width: 20%;
 margin: 0 auto 15px auto;
 padding: 15px;

 img {
  width: 100%;
  height: auto;
  border-radius: 2px;
 }

 p:first-child {
  text-transform: capitalize;
  font-size: 2rem;
  font-weight: 900;
 }

 .text-capitalize {
  text-transform: capitalize;
 }
}
</style>

这样页面就能显示5个人的个人信息了.

处理无限滚动加载逻辑

我们接下来需要在methods里面添加scroll()来监听滚动, 并且这个事件是应该在mounted()这个生命周期内的. 代码如下:

<script>
 // ...
 methods: {
  // ...
  scroll(person) {
   let isLoading = false
   window.onscroll = () => {
    // 距离底部200px时加载一次
    let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <= 200
    if (bottomOfWindow && isLoading == false) {
     isLoading = true
     axios.get(`https://randomuser.me/api/`).then(response => {
      person.push(response.data.results[0])
      isLoading = false
     })
    }
   }
  }
 },
 mounted() {
  this.scroll(this.persons)
 }
}
</script>

这段代码原文是有一点拼写错误的. 我这里修正了, 另外增加了距离底部即开始加载数据, 并进行截流.

保存好, 回到浏览器, 查看效果, 已经没有问题了~

总结

滚动到页面底部无限加载的功能在Vue上实现其实和普通的页面开发差不多, 每次滚动加载未完成的情况下不会触发请求下一次, 每次请求push到数组内, 通过<img :src="">的数据绑定实现了懒加载(其实0 0我不太认可...), 看完是不是感觉挺简单的.

最后, 我把这个也弄了一份在GitHub上面, 有需要的可以看看infinite-scroll-vuejs-demo~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript-世界上误解最深的语言分析
Aug 12 Javascript
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
用cssText批量修改样式
Aug 29 Javascript
javascript学习笔记(六) Date 日期类型
Jun 19 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
js实现多图和单图上传显示
Dec 18 Javascript
JavaScript实现拖拽盒子效果
Feb 06 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 #Javascript
jQuery中图片展示插件highslide.js的简单dom
Apr 22 #jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 #jQuery
JQuery元素快速查找与操作
Apr 22 #jQuery
javaScript产生随机数的用法小结
Apr 21 #Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 #Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 #Javascript
You might like
PHP中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
ext jquery 简单比较
2010/04/07 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
python选择排序算法实例总结
2015/07/01 Python
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
python读写csv文件实例代码
2019/07/05 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
python中selenium库的基本使用详解
2020/07/31 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
干部下基层实施方案
2014/03/14 职场文书
社区平安建设方案
2014/05/25 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
2015入党自传书范文
2015/06/26 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android