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 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
半角全角相互转换的js函数
Oct 16 Javascript
js 获取Listbox选择的值的代码
Apr 15 Javascript
一个javascript图片阅览组件
Nov 09 Javascript
JavaScript简单实现网页回到顶部功能
Nov 12 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
关于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实现javascript的escape和unescape函数
2013/06/29 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
处理Python中的URLError异常的方法
2015/04/30 Python
python3实现逐字输出的方法
2019/01/23 Python
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
Linux文件操作命令都有哪些
2016/07/23 面试题
银行纠风工作实施方案
2014/06/08 职场文书
教师学期末个人总结
2015/02/13 职场文书
2015年重阳节慰问信
2015/03/23 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
Python音乐爬虫完美绕过反爬
2021/08/30 Python
SQL SERVER触发器详解
2022/02/24 SQL Server
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server
vue修饰符.capture和.self的区别
2022/04/22 Vue.js