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

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

 

上代码，

新建组件 refreshLoad.js 

.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%;
} 

父页面调用 

  
      

        

          

            

             
            
          
          

            
            
暂无数据
          
        
      
    

  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
  },