当前位置 主页 > 网站技术 > 代码类 > 最大化 缩小

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

    栏目:代码类 时间:2019-11-08 18:03

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

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