基于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 入门实例1
Jun 25 Javascript
jQuery 美元符冲突的解决方法
Mar 28 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
AngularJS Phonecat实例讲解
Nov 21 Javascript
详解Node.js开发中的express-session
May 19 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
layui type2 通过url给iframe子页面传值的例子
Sep 06 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
玩转图像函数库―常见图形操作
2006/09/03 PHP
一个高ai的分页函数和一个url函数
2006/10/09 PHP
php正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
表单元素事件 (Form Element Events)
2009/07/17 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
python常见数制转换实例分析
2015/05/09 Python
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
python取代netcat过程分析
2018/02/10 Python
Python continue语句实例用法
2020/02/06 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
python3排序的实例方法
2020/10/20 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
校长就职演讲稿
2014/01/06 职场文书
学校元旦晚会方案
2014/02/19 职场文书
教师党员承诺书
2014/03/25 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
旷工检讨书大全
2015/08/15 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫