mintui组件loadmore使用

1.引入
按需加载
import { Loadmore } from 'mint-ui';
// 添加组件
components: {
Loadmore,
},
// 添加data
// 默认false，是否全部加载完成
allLoaded: false
// 添加方法
loadTop
// 方法完成后必须执行
// 相当于加载完成后必须重新计算列表的高度
this.$refs.loadmore.onTopLoaded();
loadBottom
// 方法完成后必须执行
// 相当于加载完成后必须重新计算列表的高度

this.allLoaded = true;
this.$refs.loadmore.onBottomLoaded();

2.使用组件
// 使用前限制下自动刷新，给组件加上:autoFill="false"

<loadmore :autoFill="false" :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
<ul>
<li v-for="item in list">{{ item }}</li>
</ul>
</loadmore>

3.代码样例

<template>
  <div class="notice">
    <tophead title="用户公告">
      <div to="/user" slot="r"></div>
    </tophead>
    <div class="notice-wrap">
      <loadmore
        :top-method="loadTop"
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        :auto-fill="false"
        ref="loadmore"
      >
        <ul class="notice-list">
          <li v-for="i in NoticeList" :key="i.id">
            <a href="#">{{ i.title }}</a>
          </li>
        </ul>
      </loadmore>
    </div>
  </div>
</template>

<script>
import TopHead from '../components/TopHead';
import service from '../service/index';
import { Loadmore } from 'mint-ui';
export default {
  name: 'notice',
  data() {
    return {
      NoticeList: [],
      allLoaded: false,
      startDate: null, // 加载数据开始日期
      endDate: null, // 加载数据的结束日期
    };
  },
  methods: {
    loadTop() {
      service.getNotices(this.startDate, 10, false).then((res) => {
        // 在数组前面添加unshift
        this.NoticeList.unshift(...res.data.data.messages);
        // 重新设置第一次请求时间
        this.startDate = this.NoticeList[0].SubData;
        // 加载完成后必须重新计算列表的高度
        this.$refs.loadmore.onTopLoaded();
      });
    },
    loadBottom() {
      service.getNotices(this.endDate, 10, false).then((res) => {
        // 在数组后面添加push
        this.NoticeList.push(...res.data.data.messages);
        // 重新设置最后一次请求时间
        this.endDate = this.NoticeList[this.NoticeList.length - 1].SubData;
        // 加载完成后必须重新计算列表的高度
        this.$refs.loadmore.onBottomLoaded();
      });
      // load more data
      // 测试阶段任意设置一个终止加载的条件，如现在条数为40
      if (this.NoticeList.length >= 40) {
        this.allLoaded = true; // if all data are loaded
        return;
      }
    },
  },
  created() {
    let now = Date.now();
    // 设置第一次请求时间
    this.startDate = now;
    service
      .getNotices(Date.now(), 10, true)
      .then((res) => {
        console.log(res.data.data.messages);
        this.NoticeList.push(...res.data.data.messages);
        //设置消息最后时间
        this.endDate = this.NoticeList[this.NoticeList.length - 1].SubData;
      })
      .catch((e) => {
        console.log(e);
      });
  },
  components: {
    tophead: TopHead,
    Loadmore,
  },
};
</script>

<style></style>