BaseRefreshScroll.vue

<template>
  <div id="minirefresh" class="minirefresh-wrap">
    <div class="minirefresh-scroll">
      <slot name="content" />
    </div>
  </div>
</template>

<script>
export default {
  name: "BaseRefreshScroll",
  data() {
    return {
      pageNo: 1
    };
  },
  mounted() {
    this.refresh();
  },
  methods: {
    refresh() {
      const that = this;
      this.miniRefresh = new window.MiniRefresh({
        container: "#minirefresh",
        isScrollBar: false,
        down: {
          offset: 50,
          callback: function() {
            that.pageNo = 1;
            that.$emit("downLoad", that.pageNo);
            that.miniRefresh.endDownLoading();
          }
        },
        up: {
          offset: 50,
          isAuto: false,
          toTop: {
            isEnable: false
          },
          callback() {
            that.pageNo++;
            that.$emit("upRefresh", that.pageNo);
            that.miniRefresh.endUpLoading(false);
          }
        }
      });
    }
  }
};
</script>