基于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('接口报错');
 });
},

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