mint-ui的Loadmore实现上拉加载，下拉刷新

最新推荐文章于 2020-09-29 11:04:41 发布

Im_qingfeng

最新推荐文章于 2020-09-29 11:04:41 发布

阅读量891

点赞数

文章标签： mint-ui loadmore 上拉加载

本文链接：https://blog.csdn.net/Im_qingfeng/article/details/94016555

版权

引入：
import ‘mint-ui/lib/style.css’

import { Toast,MessageBox,InfiniteScroll,Loadmore,Spinner } from ‘mint-ui’;

Vue.component(Toast);

Vue.component(MessageBox);

Vue.component(InfiniteScroll);

Vue.component(Loadmore.name,Loadmore);

Vue.component(Spinner.name, Spinner);

window.Toast= Toast;

window.MessageBox= MessageBox;

window.InfiniteScroll= InfiniteScroll;

import { Loadmore } from "mint-ui";

data() {
return {
list: [],
//可以进行上拉
allLoaded: false,
//是否自动触发上拉函数
isAutoFill: false,
wrapperHeight: 0,
courrentPage: 0
};
}，
created() {
this.loadFrist();
this.loadMore();
},
mounted() { // 父控件要加上高度，否则会出现上拉不动的情况 this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top; var _this = this; axios .post(‘api’, {

  })
  .then(function(data) {
    if (data.status == 200) {
      _this.list = data.data.resources.doc
    }
  });
   //   下拉刷新
loadTop() {
  this.loadFrist();
},
//  下拉刷新加载
loadFrist() {
  this.$http
    .post(`http://www.zhuangduoduo.net:3000/v1/pile/list`, {
      topModelId: "2",
      page: 1,
      size: 10
    })
    .then(response => {
      this.courrentPage = 0;
      this.allLoaded = false; // 可以进行上拉
      this.list = response.data.resources.doc;
      this.$refs.loadmore.onTopLoaded();
    });
},
// 上拉加载
loadBottom() {
  this.loadMore();
},
// 加载更多
loadMore() {
  this.$http
    .post(`http://www.zhuangduoduo.net:3000/v1/pile/list`, {
      topModelId: "2",
      page: 1,
      size: 10 * this.pageNum++
    })
    .then(response => {
      // concat数组的追加
      this.list = response.data.resources.doc
      if (this.courrentPage > response.data.resources.total / 20) {
        this.allLoaded = true; // 若数据已全部获取完毕
      }
      this.courrentPage++;
      this.$refs.loadmore.onBottomLoaded();
    });

<style scoped>

.main-body {
/* 加上这个才会有当数据充满整个屏幕，可以进行上拉加载更多的操作 */
overflow: scroll;
}
作者：XingFang666
来源：CSDN
原文：https://blog.csdn.net/xfmuchengxue/article/details/86481288
版权声明：本文为博主原创文章，转载请附上博文链接！