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

这篇文章主要介绍了基于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('接口报错');
  });
},

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • VUEJS 2.0 子组件访问/调用父组件的实例

    有时候因为布局问题,需要子组件 把数据 传给父组件,并执行父级的某个方法,不多说上代码: 子组件: <template> <div class="isShowing" ref="isShowing"> <div class="menu-wrapper" ref="scroll_warpper" v-show="!hid_show_switch"> <ul ref=&

  • Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)

    有时候因为布局问题,需要子组件 把数据 传给父组件,并执行父级的某个方法,不多说上代码: 子组件: <template> <div class="isShowing" ref="isShowing"> <div class="menu-wrapper" ref="scroll_warpper" v-show="!hid_show_switch"> <ul ref=&

  • vuejs2.0子组件改变父组件的数据实例

    在vue2.0之后的版本中,不允许子组件直接改变父组件的数据,在1.0的版本中可以这样操作的,但是往往项目需求需要改变父组件的数据,2.0也是可一个,区别是,当我们把父元素的数据给子组件时,需要传一个对象,子组件通过访问对象中的属性操作数据,下面是演示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document

  • vue.js父组件使用外部对象的方法示例

    最近在碰到有同学问我,vue父组件怎么使用外部对象,具体例子如下: 有组件a: <div @click="onClick">component a</div> // componet a ... methods: { onClick(evt) { // doSomething 这里只能拿到 mouseEvent this.outsideClickHandler(evt); // 调用外部处理函数 } } ... 有组件B,引用组件a,并传入outsideClic

  • 详解vue.js2.0父组件点击触发子组件方法

    之前关于vue.js2.0父组件的一点学习,最近需要回顾,就顺便发到随笔上了 <body> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:ee="incrementTotal"></button-counter> <button-counter v-on:ee="increment

  • 解决Vue.js父组件$on无法监听子组件$emit触发事件的问题

    最近学习vuejs看例子中用$on无法监听子组件$emit触发事件: 使用版本 vue.js 2.2.5 参考文献 1.vuejs API 2.解决实例 问题分析 1.之前写的自定义组件事件触发为this.$emit("myclick",this.todo.text);,这样this指的是todo-item的每一项,而最后vm.$on监听的是app组件,也就出说监听的是父节点,而触发的是子节点,故监听不到这个事件的. 解决思路 1.将触发事件放在父节点上触发,就可以监听到触发的事件了,

  • vue.js中父组件调用子组件的内部方法示例

    前言 今天同事问了一个问题,他在用iview开发时,需要用到iview一个组件的内部方法,而这个内部方法并没有暴露出来,这种情况下如何调用组件内部方法呢,其实很简单,举个栗子

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

    这篇文章主要介绍了基于JS实现父组件的请求服务过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 <template> <div class = 'car_list' reft='scrollobx' @scroll='scrollready($event)'> </div> </template> <script> export default { data() { return { le

  • 微信小程序网络请求实现过程解析

    这篇文章主要介绍了微信小程序网络请求实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 配置服务器域名: 每个微信小程序需要事先设置一个通讯域名,小程序只可以跟指定的域名进行网络通信. 服务器域名在:小程序后台=> 开发=> 开发设置 => 服务器域名中配置,配置时需注意: 1.域名只支持https(request, uploadFile,downloadFile)和wss(connectSocket)协议. 2.域名不能使用i

  • 基于charles抓取https请求使用过程解析

    基于charles抓取https请求使用过程解析

    使用Charles抓https请求,这里需要设置连接端即浏览器或应用程序和Charles端,才能完成SSL Proxying的设置. SSL 证书 连接端需要先安装Charles证书,以下介绍了如何在不同的浏览器或应用程序上信任Charles根证书 Windows/Internet Explorer 操作: 1.Charles->Help->SSL Proxying > Install Charles Root Certificate,会弹出一个窗口警告你没有信任CA Root Cert

  • 基于JS实现计算24点算法代码实例解析

    前言 休息的时候无意间看到群里有人发出了华为的校招题,一开始看题目的时候觉得很简单,于是晚上就试着写了一下,结果写的过程中打脸,不断的整理逻辑不断的重写,但我的性格又是不做出来晚上睡不好的那种,于是在做出来的时候就分享给大家(快凌晨三点了有木有,这校招题难度都达到这级别了?o(╥﹏╥)o) 题目描述 审题要注意:1+2+3*4是前面三个已经相加为6再乘4,没有括号!! 代码: <!DOCTYPE html> <html lang="en"> <head&g

  • js、jquery实现列表模糊搜索功能过程解析

    实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 2. 可以点击某一项进行选中列表项 3. 可以按下上.下.回车键来控制列表项 4. 按下回车键时则会选中列表项 5. 点击文本框中的下拉键头时会切换下拉框的显示/隐藏 6. 点击文本框外部时自动隐藏下拉框 先来预览一下效果吧! 列表中包含的列表项有: 北京.上海.杭州.安庆.大兴安岭.安阳.广州.贵阳.哈尔滨.合肥.邯郸.呼伦贝尔.淮南.黄山.济南.济宁.嘉兴.南昌.南通.南宁.南京 在预览

  • 基于python requests selenium爬取excel vba过程解析

    目的:基于办公与互联网隔离,自带的office软件没有带本地帮助工具,因此在写vba程序时比较不方便(后来发现07有自带,心中吐血,瞎折腾些什么).所以想到通过爬虫在官方摘录下来作为参考. 目标网站:https://docs.microsoft.com/zh-cn/office/vba/api/overview/ 所使工具: python3.7,requests.selenium库 前端方面:使用了jquery.jstree(用于方便的制作无限层级菜单 设计思路: 1.分析目标页面,可分出两部分

  • Python urllib request模块发送请求实现过程解析

    Python urllib request模块发送请求实现过程解析

    1.Request()的参数 import urllib.request request=urllib.request.Request('https://python.org') response=urllib.request.urlopen(request) print(response.read().decode('utf-8')) 通过构造这个数据结构,一方面可以我们可以将请求独立成一个对象,另一方面可以更加丰富和灵活地配置参数. 它的构造方法如下: class.urllib.reques

  • Springmvc获取前台请求数据过程解析

    1)基本数据类型或String,在方法参数中定义参数,参数名与请求传递数据名一致即可自动封装: // RequestMapping:指定方法对应的请求地址 //return:页面地址,表示方法执行完成之后跳转到对应的页面(转发) //springmvc:接收请求参数,直接在方法的参数中定义名称与传递参数名一致的形参即可 //name:会自动接收请求传递的name值 @RequestMapping("/hello") public String hello(String name,Int

  • JS图片懒加载技术实现过程解析

    懒加载技术 懒加载(LazyLoad)是前端优化的一种有效方式,极大的提升用户体验,图片一直是页面加载的流浪大户,现在一张图片几兆已经是很正常的事,远远大于代码的大小. 原理:页面加载后只让文档可视区内的图片显示,其它不显示,随着用户对页面的滚动,判断其区域位置,生成img标签,让到可视区的图片加载出来. 所用相关技术:给img加属性 (例如data-src),将图片的地址赋值给他,这样就生成img标签后再把data-src的值赋给img的src(通过dataset.src或者getAttrib

随机推荐