Vue下拉刷新、上拉加载组件插件

要做下拉刷新  上拉加载的功能  找了个详细的组件  但跟需求有差  根据组件调整

 

上代码，

新建组件 refreshLoad.js 

<template>
  <div style="overflow: hidden; height: 100%">
    <div
      class="my-scroll"
      :class="[scrollState ? 'prohibit' : 'allow']"
      ref="myScroll"
      id="center"
      @scroll.passive="onScroll($event)"
      @touchmove="onScroll($event)"
    >
      <!-- top -->
      <div class="scroll-list">
        <slot name="scrollList"></slot>
        <div class="scroll-bottom">
          <div v-if="state == 1">
            <p>加载中</p>
          </div>
          <div v-if="state == 2">加载完成</div>
          <div v-if="state == 3">没有数据了</div>
        </div>
      </div>
    </div>
    <div class="backTop" v-if="backTop" @click="BackTop">
     <!-- <img src="../../assets/image/fhtop.png" alt="" srcset="" /> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "myScroll",
  props: {
    onPull: {
      // 加载回调
      type: Function,
      require: true,
    },
    scrollState: {
      // 是否可滑动
      type: Boolean,
      require: true,
    },
    loaded: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  data() {
    return {
      timeoutId: null,
      state: 0,
      myScroll: null,
      backTop: false,
    };
  },
  methods: {
    /*
     * 加载中：1
     * 加载完成：2
     * 没有更多：3
     */
    setState(index) {
      // 修改状态
      this.state = index;
      console.log(this.state);
    },
    onScroll(e) {
      const _this = this;
      if (_this.myScroll.scrollTop > 0) {
        _this.backTop = true;
      } 
      if (_this.myScroll.scrollTop < window.innerHeight / 2) {
        _this.backTop = false;
      }

      if (
        !_this.loaded &&
        window.innerHeight + _this.myScroll.scrollTop >=
          _this.myScroll.scrollHeight - 300
      ) {
        clearTimeout(this.timeoutId);
        _this.timeoutId = setTimeout(() => {
          _this.bottomCallback();
        }, 600);
      }
    },
    bottomCallback() {
      // 加载回调
      // console.log('回调', new Date().getTime())
      if (this.state != 3) {
        this.state = 1;
        this.onPull();
      }
    },

//返回顶部
    BackTop() {
      const that = this;
      let timer = setInterval(() => {
        if (that.myScroll.scrollTop > 0) {
          that.myScroll.scrollTop -= 200; 
        }
        if (that.myScroll.scrollTop === 0) {
          that.backTop = false;
          clearInterval(timer);
        }
      }, 16);
    },
  },
  mounted() {
    this.myScroll = this.$refs.myScroll; // 获取滑条dom
  },
};
</script>

.prohibit {
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  will-change: transform;
  transition: all 450ms;
  backface-visibility: hidden;
  perspective: 1000;
}
.allow {
  overflow: hidden;
  height: auto;
}
.backTop {
  position: fixed;
  z-index: 99999;
  bottom: 60px;
  right: 10px;
  width: 50px;
}
img {
  width: 100%;
} 

父页面调用 

  <refreshLoad
      class="scrolls"
      ref="myScroll"
      :on-pull="getData"
      :loaded="loaded"
      :scroll-state="scrollState"
    >
      <div slot="scrollList">
        <div class="casebox">
          <ul class="caseList" v-if="list && list.length">
            <li >
             
            </li>
          </ul>
          <div class="nodata" v-else>
            <img class="img_ cen" src="@/assets/image/nodata.png" alt="" />
            <div class="text_">暂无数据</div>
          </div>
        </div>
      </div>
    </refreshLoad>

  if (res.code == 0  && res.data.content.length > 0 && !this.loaded) {
          // this.list = res.data.content;
          if (this.pageList.page == 0) {
            this.list = res.data.content;
          } else {
            this.list.push(...res.data.content);
          }
          this.pageList.page++;
          this.$refs.myScroll.setState(2);

          this.$store.dispatch("setLoading", false);
        }

引用组件

import refreshLoad from "@/components/refreshLoad";
export default {
  components: { 
    refreshLoad
  },