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 相关文章推荐
JS数组的常见用法实例
Feb 10 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
vuejs父子组件通信的问题
Jan 11 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
Vue中CSS动画原理的实现
Feb 13 Javascript
js实现的在本地预览图片功能示例
Nov 09 Javascript
vue组件开发之slider组件使用详解
Aug 21 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
关于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 strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
thinkphp缓存技术详解
2014/12/09 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
基于JQuery制作的产品广告效果
2010/12/08 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
python编写暴力破解FTP密码小工具
2014/11/19 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
Python中常用信号signal类型实例
2018/01/25 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
Python中six模块基础用法
2019/12/08 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
python cookie反爬处理的实现
2020/11/01 Python
python 下载文件的多种方法汇总
2020/11/17 Python
详解Python中的文件操作
2021/01/14 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
护士自我评价
2014/02/01 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
苏州园林导游词
2015/02/03 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书