交接时选择试验室

licp

2024-07-23 da498efb165dbada586396baecc71c644e46b1e8

 src/components/tool/scroll-paging.vue

@@ -1,15 +1,15 @@
<template>
  <div class="scroll-pagination"  ref="content" @scroll="scrollFn">
  <div class="scroll-pagination"  ref="content" @scroll="onScroll">
    <slot></slot>
    <el-button
        v-if="isLoding"
        v-show="isLoding&&!finishLoding"
        type="text"
        style="display: flex; margin: 0 auto; color: #909399"
        ><i class="el-icon-loading" style="font-size:20px"></i
      ></el-button>
    <el-button
      type="text"
      v-if="finishLoding"
      v-show="finishLoding"
      style="display: flex; margin: 0 auto; color: #909399"
      >已经没有更多啦~</el-button
    >
@@ -23,6 +23,19 @@
    finishLoding: {
      type:Boolean,
      default:false
    },
    list:{
      type:Array,
      default:()=>[]
    }
  },
  watch: {
    list:{
      deep:true,
      handler(){
        this.isLoding = false
        console.log(this.isLoding)
      }
    }
  },
  data() {
@@ -30,13 +43,19 @@
      isLoding: false,
    }
  },
  created(){
    // 防抖
    this.onScroll = this.debounce(this.scrollFn,500);
    // 节流
    // 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 +66,36 @@
    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)
      }, 500)
    },
    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>