<template>
<div class = 'car_list' reft='scrollobx' @scroll='scrollready($event)'>
</div>
</template>
<script>
export default {
data() {
return {
lengthThreshold: 50, //当滑动到距离低端50px时,更新数据
timeThreshold: 300,
promise: null
}
},
methods: {
// 滚动加载列表
scrollready() {
if(this.shouldScroll()) {
if (this.promise) {
return;
}
// 进行加载
this.fn();
// 防止多次滑动,频繁请求后台资源
let self = this;
this.promise = setTimeout(() => {
self.promise = null;
}, this.timeThreshold);
}
},
// 调用父组件请求资源服务
fn() {
this.$emit('scrollChange');
},
shouldScroll() {
if(document.scrollTop === 0) {// 滑动距离为0,还没开始滑动
return false;
}
// 列表高度 - 列表可视高度 - 滑动的高度 < 50px , 则加载更多
return this.$refs.scrollbox.scrollHeight - this.$refs.scrollbox.clientHeight - this.$refs.scrollbox.scrollTop < this.lengthThreshold;
},
}
}
</script>

父组件的请求服务方法:

queryCarApplyShareList() {
this.Load = true;
CarResources.methods.queryCarApplyShareList(this.http, this.pageNo, this.pageSize).then((res) => {
if (res && res.status === 200) {
if (this.pageNo === 1) { // 加载第一页数据
this.CarList = res.data || [];
} else { // 加载更多
this.CarList = this.CarList.concat(res.data);
}
this.IsLastPage = res.data.length === 0
}
this.Load = false;
}, () => {
this.Load = false;
console.log('接口报错');
});
},

  

纯JS实现加载更多(VUE框架)的更多相关文章

  1. 【Vue.js】加载更多—vue-infinite-scroll

    引言 今天用到了一个加载更多的插件,用起来很方便,插件的名字叫做vue-infinite-scroll 我们可以去npmjs.com官网看一下这个vue-infinite-scroll的用法,官网上面 ...

  2. 使用vue之directive设计列表加载更多

    背景 之前写过一篇<纯JS实现加载更多(VUE框架)>,它的逻辑思路比较清晰易懂,而今天看了一天公司项目的部分功能代码,发现同事们写的加载更多的功能更加的有趣,而且易于封装到一个组件当中, ...

  3. js实现『加载更多』功能实例

    DEMO : 滚动加载示例 关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多.下拉刷新功能. 但实际用起来却是很麻烦.由于是第三方插件,要按照对方 ...

  4. React-Native 之 GD (七)下拉刷新 及 上拉加载更多

    1.下拉刷新  使用第三方插件 下载插件: $ npm install react-native-pull@latest --save 引入: import {PullList} from 'reac ...

  5. vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  6. 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...

  7. vue移动端上拉加载更多

    LoadMore.vue <template> <div class="load-more-wrapper" @touchstart="touchSta ...

  8. vue mpvue 上拉加载更多示例代码

    vue 上拉加载更多示例代码 可以比较简单的改为 mpvue , 去除滚动判断,直接放在 onReachBottom 周期即可. html <div id="app"> ...

  9. 关于Vue中页面(父组件)下拉,页面中的子组件加载更多数据的实现方法

    一个项目中存在很多这种情况:父组件(页面)中的子组件需要做下拉加载更多的需求,但是这个下拉到底部的动作只能通过监控页面(父组件)来完成 这就需要父子组件之间的通信,代码如下: 1. 建立一个用于父子组 ...

随机推荐

  1. 在JAVA中对于类,对象,继承,多态的看法

    这是我第一次学高级语言.很抱歉选择了JAVA,目标是开发一款可以上线的APP. 类:是建立对象的一个模板,就是系列产品中的基础款图纸.只是图纸而已.不是产品. 对象:是一个可以操作的对象.新建一个对象 ...

  2. 关于Eclipse导入项目jsp出现红色叉的解决办法

    简单图解概括 右击项目 到这里就ok 如果没解决就检查下以下三个地方的版本是否一致 如果还不行,有什么疑问可以留言,我会及时帮助解决的

  3. alfred3配置

    搜索功能配置 github https://github.com/search?utf8=%E2%9C%93&q={query} github'{query}' g baidu http:// ...

  4. ireport图形化界面生成pdf文档

    一.ireport软件安装 1.下载软件的官网 https://community.jaspersoft.com/project/ireport-designer/releases 2.安装软件   ...

  5. Linux下Oracle表空间及用户创建

    记录详细过程以备使用 Connected to Oracle Database 11g Enterprise Edition Release 11.2.0.1.0 Connected as sys@i ...

  6. SQL Server 2008 安装(lpt亲测)

    SQL Server安装真的遇到好多问题啊!!  于是就决定写个备忘,方便自己也方便别人. 1.下载安装包 2.打开安装包,就遇到了restart computer 那里failed的错误,导致无法继 ...

  7. python 操作 MD5

    MD5是什么! Message Digest Algorithm MD5(中文名为消息摘要算法第五版)为计算机安全领域广泛使用的一种散列函数,用以提供消息的完整性保护.该算法的文件号为RFC 1321 ...

  8. Javascript高级编程学习笔记(43)—— 动态脚本

    动态脚本 大多数情况下,DOM操作都很简洁明了 因为DOM主要就是用来操作页面中的可视节点的 但有些时候我们又希望可以动态的来进行DOM操作 其中的一部分也就是今天我们的内容动态脚本 动态脚本是什么意 ...

  9. PackageManager整理

    一.PackageManager的功能 1.安装.卸载应用.2.查询permission相关信息.3.查询Application相关信息(application,activity,receiver,s ...

  10. 吴恩达机器学习笔记31-梯度检验(Gradient Checking)

    当我们对一个较为复杂的模型(例如神经网络)使用梯度下降算法时,可能会存在一些不容易察觉的错误,意味着,虽然代价看上去在不断减小,但最终的结果可能并不是最优解.为了避免这样的问题,我们采取一种叫做梯度的 ...