x优化班次

licp

2024-05-11 d40e875d8e025fd09566e919306f5b05755c25cb

 src/components/tool/scroll-paging.vue

@@ -1,5 +1,5 @@
<template>
  <div class="scroll-pagination"  ref="content" @scroll="scrollFn">
  <div class="scroll-pagination"  ref="content" @scroll="onScroll">
    <slot></slot>
    <el-button
        v-if="isLoding"
@@ -30,13 +30,19 @@
      isLoding: false,
    }
  },
  created(){
    // 防抖
    this.onScroll = this.debounce(this.scrollFn,2000);
    // 节流
    // this.onScroll = this.throttle(this.scrollFn,1000);
  },
  mounted(){
    window.addEventListener("scroll", this.throttle(this.scrollFn, 20000));
  },
  methods: {
    onScroll(){},
    scrollFn() {
      let content = this.$refs.content
      if (content.scrollTop + content.clientHeight >= content.scrollHeight) {
      if (content.scrollTop + content.clientHeight+1 >= content.scrollHeight) {
        if(!this.finishLoding){
          this.loadMore()
        }else{
@@ -47,30 +53,37 @@
    loadMore(){
      if (this.isLoding) return
      this.isLoding = true
      // Simulate loading data (replace with your own API call)
      setTimeout(() => {
        this.$emit('load')
        this.isLoding = false
      }, 1000)
    },
    throttle(fn, wait) {
      // 封装函数进行节流
      var timer = null;
    debounce(func, delay) {
      let timer = null;
      return function () {
        var context = this;
        var args = arguments;
        if (!timer) {
          timer = setTimeout(function () {
            fn.apply(context, args);
            timer = null;
          }, wait);
        if (timer) {
          clearTimeout(timer);
          timer = null;
        }
        timer = setTimeout(() => {
          func(...arguments);
        }, delay);
      };
    },
  },
  destroyed() {
    window.removeEventListener("scroll", this.throttle(), false);
  },
    throttle(func, delay) {
      let time = null;
      return function () {
        let args = Array.from(arguments);
        if (time === null) {
          time = setTimeout(() => {
            func(...args);
            clearTimeout(time);
            time = null;
          }, delay);
        }
      };
    }
  }
}
</script>