结合mint-ui Loadmore实现上拉加载和下拉刷新

案例说明

• 效果图

  
  商品列表
  

  父组件

<template>
 <div class="scroll_wrap"  ref="wrapper" id="scroll_wrap">
      <mt-loadmore :bottomDistance="5" :top-method="loadTop"  :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="isAutoFill">
           <oneColum  :liveList="liveList"  :handleScroll="handleScroll"></oneColum>
      </mt-loadmore>
    </div>
</template>

export default {
    name: "Learn",
    data(){
      return{
        page: 1,
        allLoaded: false,  //可以进行上拉
        isAutoFill: false,   //是否自动触发上拉函数
        scroll:0,
      }
    },
    created() {
      this.getLearnLIst(1);
    },
    methods: {
      // 下拉刷新
      loadTop() {
        this.$refs.loadmore.onTopLoaded();
        this.getLearnLIst(1)
      },
      //上拉加载
      loadBottom() {
        this.getLearnLIst(this.page);
        this.$refs.loadmore.onBottomLoaded();
      },

      getLearnLIst(page){
        this.page=page
        this.option={ }
        this.$http.post('api/studySchedule/getStudyScheduleList',{page:page})
          .then((res)=>{
            console.log(res.body);
            if(res.body.code==1){
              let datas = res.body.data.list
              this.page==1?this.liveList = datas: this.liveList=this.liveList.concat(datas);
              if (this.page == res.body.data.lastPage) {
                this.allLoaded = true; // 若数据已全部获取完毕
              }
              this.page++;
            }
          })
      },

      // 获取滚动条向上滚动的高度
      handleScroll(scroll) {
        scroll = this.$refs.wrapper.scrollTop;
        this.scroll = scroll;
      },
   
    // 定位保存的scroll(即从详情页返回列表页返回时的位置）
    activated() {
      this.$refs.wrapper.scrollTop = this.scroll;
    },

    // 判断进入详情页之前的地址
    beforeRouteLeave(to, from, next) {
      //  this.handleScroll();  //如果没有子组件
      if (to.name == "coursedetail") {
        from.meta.keepAlive = true;
      } else {
        from.meta.keepAlive = false;
      }
      next();
    },
  }
</script>

子组件

<template>
  <div class="one_colum">
    <div  v-for="(item,i) in courseList" :key="i" >
      <img v-lazy="item.img_url" >
    </div>
  </div>
</template>


<script>
  export default {
    name: "OneColum",
    props: ['courseList','handleScroll', ], 
    data() {
      return {
        scroll:0,
      }
    },
 methods: {
      //进入详情
      goDetail(id,item_type){
        //存储 scrollTop 的值
        if(this.handleScroll != undefined){
          this.handleScroll(this.scroll)
        }
    }
}
}
</script>