Vue <Mint-ui 上拉刷新加载问题>

主要是一开始看mint-ui的文档没咋明白，所以找的资料，其实原理和element-ui分页是一样的,相当于没上拉一次调用一次后端接口，请求一次数据

首先

npm install --s mint-ui

main.js引入

import Mint from 'mint-ui';
import 'mint-ui/lib/style.css';

效果图

image.png

代码如下

<template>
  <div id="content">
    <mt-loadmore
      :bottom-method="loadBottom"
      :bottom-all-loaded="allLoaded"
      :auto-fill="false"
      ref="loadmore"
    >
      <div class="item" v-for="(item,index) in list" :key="index">
        <div class="name">{{item.noticeTitle}} + {{index}}</div>
      </div>
    </mt-loadmore>
  </div>
</template>
<script>
import { Loadmore } from "mint-ui";//引入相关子功能
export default {
  data() {
    return {
      list: [],//储存数据
      allLoaded: false
    };
  },
  components: {
    "mt-loadmore": Loadmore //组件引入
  },
  mounted() {
    this.getList();
  },
  methods: {
   //当上拉时调用的方法
    loadBottom() {
      this.$refs.loadmore.onBottomLoaded();
      this.getList(); 
    },
    //此处是你通过调用后端接口获取的信息
    getList() {
     //具体请求参数要根据后端定
      let params = {
        pageNumber: 0,
        pageSize: 10 //每次请求10条数据
      };
      this.$axios
        .post(
          "https://接口",
          params
        )
        .then(res => {
          this.list = this.list.concat(res.data.body.content);
          console.log(this.list);
        });
    }
  }
};
</script>

<style scoped>
#content {
  overflow: scroll;
}
.item {
}
.item .name {
  height: 50px;
  background-color: green;
  margin-bottom: 10px;
}
</style>