vue 结合mintui做分页

说明：我用到的是mintui里面的Infinite scroll，与后端结合进行前端分页

1、引入Infinite scroll（这个不多作说明，官方文档里面有）

2、在html结构上添加属性

<ul

    v-infinite-scroll="loadMore"

    infinite-scroll-disabled="loading"

    infinite-scroll-distance="10">

    <li v-for="item in list">{{ item }}</li>

  </ul>

如果想要添加提示：

<div class="loadMore" v-show="moreLoad">

      <p class="loadMoreTitle">加载更多</p>

      <mt-spinner type="fading-circle" :size="18"></mt-spinner>

    </div>

    <div class="loaded" v-show="loaded">已全部加载</div>

3、在data里面定义变量

     moreLoad: false, //是否显示加载更多提示

      loaded: false,  //是否显示加载完成提示

      loading: false,  // 若为真，则无限滚动不会被触发

      noMore: false //滚动到最后不再滚动

      params:{

         index:1, //页码

        page:10, //一页多少数据

        total:‘’ //一共多少数据

     }

4、在methods里面

// 订单列表

    orderList() {

      let that = this;

      that.loading = true;

      that.moreLoad = true;

      that.loaded = false;

      that.$api

        .get('此处省略接口地址', {

          index: that.params.index,

          page: that.params.page

        })

        .then(res => {

          that.moreLoad = false;

          if (res.error == 0) {

            that.loading = false;

            that.total = res.data.num;

            if (that.params.index == 1) {

              that.list = res.data.data;

            } else {

              that.list = that.list.concat(res.data.data);

            }

            if (that.list.length >= that.params.total) {

              that.noMore = true;

              that.loaded = true;

            }

            if (res.data.data.length < that.params.page) {

              that.loaded = false;

            }

          }

        })

        .catch(err => {

          console.log(err);

        });

    },

loadMore() {

      let that = this;

      if (that.loading || that.noMore) {

        return;

      }

      that.params.index += 1;

      that.orderList();

    }