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 相关文章推荐
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
js 金额格式化来回转换示例
Feb 23 Javascript
JavaScript中的Math.LOG2E属性使用详解
Jun 14 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
Vue不能观察到数组length的变化
Jun 08 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 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扩展模块memcached长连接使用方法分析
2014/12/24 PHP
php生成动态验证码gif图片
2015/10/19 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
HTML5之语义标签介绍
2016/07/07 HTML / CSS
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
公司活动邀请函
2014/01/24 职场文书
加拿大探亲邀请信
2014/01/28 职场文书
总经理岗位职责描述
2014/02/08 职场文书
师德建设实施方案
2014/03/21 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
企业承诺书格式
2014/05/21 职场文书
房屋买卖协议样本
2014/11/16 职场文书
标准发言稿结尾
2019/07/18 职场文书