主要思路通过自定义指令,在视图初始化完成后,绑定scroll事件。当scrollTop + clientHeight >= scrollHeight时(此时滚定条到了底部)触发loadMore事件,

<template>
<div class="index" v-scroll="loadMore">
<!-- 列表数据传递给子组件,loading表示是否正在加载数据,避免在请求时多次触发 -->
<my-item :lists="lists" :loading="loading" />
</div>
</template> <script>
import MyItem from '~/components/Item.vue'
export default {
name: 'Index',
created () {
// 初始化数据
this.$store.dispatch('GET_INDEX_LISTS')
this.lists = this.$store.state.lists
},
data() {
return {
lists: [],
page: 1,
loading: false
}
},
directives: {
scroll: {
bind: function (el, binding){
window.addEventListener('scroll', function() {
if(document.documentElement.scrollTop + document.documentElement.clientHeight >= document.documentElement.scrollHeight) {
let loadData = binding.value
loadData()
}
})
}
}
},
methods: {
async loadMore(){
if(!this.loading){
this.loading = true
// 请求下一页数据
await this.$store.dispatch('GET_INDEX_LISTS', {
page: this.page++
})
// 重新填充数据
this.lists = this.lists.concat(this.$store.state.lists)
this.loading = false
}
}
},
components: {
MyItem
}
}
</script>

附上一个css loading动画 , Loading.vue:

<template>
<div class="loading">
<div class="loader-inner line-scale">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</template>
<style>
.loading {
text-align: center;
}
.loader-inner {
display: inline-block;
} @-webkit-keyframes line-scale {
0% {
-webkit-transform: scaley(1);
transform: scaley(1);
} 50% {
-webkit-transform: scaley(0.4);
transform: scaley(0.4);
} 100% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
} @keyframes line-scale {
0% {
-webkit-transform: scaley(1);
transform: scaley(1);
} 50% {
-webkit-transform: scaley(0.4);
transform: scaley(0.4);
} 100% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
} .line-scale > div:nth-child(1) {
-webkit-animation: line-scale 1s 0.1s infinite
cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: line-scale 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
} .line-scale > div:nth-child(2) {
-webkit-animation: line-scale 1s 0.2s infinite
cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: line-scale 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
} .line-scale > div:nth-child(3) {
![](http://images2017.cnblogs.com/blog/1027889/201712/1027889-20171206110307066-486062764.png) -webkit-animation: line-scale 1s 0.3s infinite
cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: line-scale 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
} .line-scale > div:nth-child(4) {
-webkit-animation: line-scale 1s 0.4s infinite
cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: line-scale 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
} .line-scale > div:nth-child(5) {
-webkit-animation: line-scale 1s 0.5s infinite
cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: line-scale 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
} .line-scale > div {
background-color: #fe0061;
width: 4px;
height: 30px;
border-radius: 2px;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
}
</style>

加载效果图:

vue实现pc端无限加载功能的更多相关文章

  1. Vue中实现一个无限加载列表

    参考 https://www.jianshu.com/p/0a3aebd63a14 一个需要判断的地方就是加载中再次触发滚动的时候,不要获取数据. <!DOCTYPE html> < ...

  2. js实现移动端无限加载分页

    原理:当滚动条到达底部时,执行下一页内容. 判断条件需要理解三个概念:    1.scrollHeight 真实内容的高度    2.clientHeight 视窗的高度,即在浏览器中所能看到的内容的 ...

  3. Vue.js 开发实践:实现精巧的无限加载与分页功能

    本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js ...

  4. vux-scroller实现移动端上拉加载功能

    本文将讲述vue-cli+vux-scroller实现移动端的上拉加载功能: 纠错声明:网上查阅资料看到很多人都将vux和vuex弄混,在这里我们先解释一下,vuex是vue框架自带的组件,是数据状态 ...

  5. 使用scrollpagination实现页面底端自动加载无需翻页功能

    当阅读到页面最底端的时候,会自动显示一个"加载中"的功能,并自动从服务器端无刷新的将内容下载到本地浏览器显示. 这样的自动加载功能是如何实现的?jQuery的插件 ScrollPa ...

  6. Qt实现小功能之列表无限加载

    概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用 ...

  7. Qt实现小功能之列表无限加载(创意很不错:监听滚动条事件,到底部的时候再new QListWidgetItem)

    概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用 ...

  8. JRoll 2 使用文档(史上最强大的下拉刷新,滚动,无限加载插件)

    概述 说明 JRoll,一款能滚起上万条数据,具有滑动加速.回弹.缩放.滚动条.滑动事件等功能,兼容CommonJS/AMD/CMD模块规范,开源,免费的轻量级html5滚动插件. JRoll第二版是 ...

  9. JS实现-页面数据无限加载

    在手机端浏览网页时,经常使用一个功能,当我们浏览京东或者淘宝时,页面滑动到底部,我们看到数据自动加载到列表.之前并不知道这些功能是怎么实现的,于是自己在PC浏览器上模拟实现这样的功能.先看看浏览效果: ...

随机推荐

  1. R语言数据接口

    R语言数据接口 R语言处理的数据一般从外部导入,因此需要数据接口来读取各种格式化的数据 CSV # 获得data是一个数据帧 data = read.csv("input.csv" ...

  2. CSS_高级选择符

    2016-11-07 <css入门经典>第八章 1.属性选择器 选择器 描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性 ...

  3. RequireJs 的 使用

    为什么使用requirejs: 1.有效的防止命名的冲突 2.声明不同js之间的依赖 3.可以让我们的代码以模块化的方式组织 用法: 1.创建一个入口文件main.js(自己随便命名) 然后引入req ...

  4. js的几个补充事件

    在这里我做几个前面文章当中没有介绍的javascript补充事件 1.onscroll:当元素滚动条滚动时执行的事件: <div class="container"> ...

  5. flask之flask-script组件

    Flask Script扩展提供向Flask插入外部脚本的功能,包括运行一个开发用的服务器,一个定制的Python shell,设置数据库的脚本,cronjobs,及其他运行在web应用之外的命令行任 ...

  6. urllib 报错 IOError: [Errno socket error] TLS/SSL connection has been closed (EOF) (_ssl.c:590)

    解决方案: My evil workaround (don't do this in production!): import urllib2 #也可以是urllib import ssl ctx = ...

  7. 利用Caffe训练模型(solver、deploy、train_val) + python如何使用已训练模型

    版权声明:博主原创文章,微信公众号:素质云笔记,转载请注明来源“素质云博客”,谢谢合作!! https://blog.csdn.net/sinat_26917383/article/details/5 ...

  8. Spring Aop——给Advice传递参数

    给Advice传递参数 Advice除了可以接收JoinPoint(非Around Advice)或ProceedingJoinPoint(Around Advice)参数外,还可以直接接收与切入点方 ...

  9. 第一章 java nio三大组件与使用姿势

    本案例来源于<netty权威指南> 一.三大组件 Selector:多路复用器.轮询注册在其上的Channel,当发现某个或者多个Channel处于“就绪状态”后(accept接收连接事件 ...

  10. “2014年CityEngine三维建模与设计精英培训班”——全国巡回举办

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYXJjZ2lzX2FsbA==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...