基于JS实现父组件的请求服务过程解析


Posted in Javascript onOctober 14, 2019

这篇文章主要介绍了基于JS实现父组件的请求服务过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

<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;
    }<br data-filtered="filtered">    // 列表高度 - 列表可视高度 - 滑动的高度 < 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 = <strong>this.CarList.concat(res.data);</strong>
    }
    this.IsLastPage = res.data.length === 0
   }
   this.Load = false;
  }, () => {
   this.Load = false;
   console.log('接口报错');
  });
},

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery实现图片左右自动滚动示例
Sep 25 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 Javascript
js实现批量删除功能
Aug 27 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 #Javascript
vue循环数组改变点击文字的颜色
Oct 14 #Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 #Javascript
VUE+node(express)实现前后端分离
Oct 13 #Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 #Javascript
javaScript把其它类型转换为Number类型
Oct 13 #Javascript
js 实现watch监听数据变化的代码
Oct 13 #Javascript
You might like
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
javascript 冒号 使用说明
2009/06/06 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
JavaScript Date对象应用实例分享
2017/10/30 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
代码详解django中数据库设置
2019/01/28 Python
Python内存管理实例分析
2019/07/10 Python
在python3中实现更新界面
2020/02/21 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
django列表筛选功能的实现代码
2020/03/27 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
python 如何在测试中使用 Mock
2021/03/01 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
软件生产职位结构化面试主要考察要素及面试题库
2015/06/12 面试题
《再见了,亲人》教学反思
2014/02/26 职场文书
人民调解员培训方案
2014/06/05 职场文书
就业意向协议书
2015/01/29 职场文书
离婚答辩状范文
2015/05/22 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang