如何用Vue + Mint UI实现上拉加载更多？

引言:
上拉加载更多在移动端不论是在 app 里面还是在页面中都是必不可少的，以下是 mint-ui 中上拉加载更多的总结。
一、在项目中使用 mint-ui 需要先安装
查看官网
(1)安装:npm i mint-ui --save
(2)在 vue 中 main.js 引入

import MintUi from 'mint-ui
import 'mint-ui/lib/style.css

全局使用: Vue.use(MintUi)
二、上拉加载更多展示

三、逻辑解析
1.上拉加载实际上是分页的一种体现，刚开始处于加载状态
2.如果数据加载成功需要判断数据是不是最后一页（可能只有一页数据）
(1)上拉加载是根据 page 的不断自增长，在调接口的时候获取新的数据的，如果加载出来的数据小于每页显示的数据，那么说明加载结束。需要通过 vue 数据双向绑定隐藏加载中字样
(2)如果加载完数据，还需要显示没有更多数据的提示
(3)使用 mint-ui 之

  <ul
      v-infinite-scroll="getmovielist"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="40"
    >
  </ul>

其中：
getmovielist 是一个方法，用于调用接口处理数据，默认会自动调用一次初始化展示;
loading 是个开关，用于在加载数据过程中防止用户不断触发上来触底再次加载;
40 表示距离底部小于 40 像素的位置再次触发数据加载。
3.如果在加载的过程中，用户继续上拉至底部触碰加载新的一页数据(上拉加载实际上是分页的一种体现)
4.脚手架 html 代码如下

<template>
  <div class="movie_body">
    &