第一步：在官网复制所需代码 loadmore
<mt-loadmore :top-method="loadTop" // 此方法用于执行刷新，没有这个方法就没办法刷新，并在methods写这个方法 @top-status-change="handleTopChange" > // 写了slot="top"就证明是下拉刷新，位置是在页面上的上方 <div slot="top" class="mint-loadmore-top"> <span v-show="topStatus !== 'loading'" // :class="{'rotate': topStatus === 'drop'}"> ↑ </span> <span v-show="topStatus === 'loading'">↓</span> </div> <div> 。。。// 自己写的页面内容 </div> </mt-loadmore>第二步：方法
data () { return { topStatus: '' // 在data里定义topStatus用来储存下拉刷新时的状态，pull loading drop } }, methods: { loadTop() { // 下拉刷新方法 }, handleTopChange(status) {// 查看下拉刷新状态 this.topStatus = status; //此处将获取到的状态赋值给topStatus，在第一步给出的代码的span标签里进行调用， 用来判断状态到底是下拉加载还是已经刷新结束并执行相应的动作 console.log(status) // 可以console.log看一下三个状态分别是什么 } }console.log发现只有两个状态，而没有pull，并看图发现下拉之后并没有向上回收，还能看到下拉箭头，该如何解决：
第三步：解决下拉刷新不向上回收问题 1、在dom里操作
ref="loadmore"2、添加方法
loadTop() { //下拉刷新方法 this.$refs.loadmore.onTopLoaded(); //下拉刷新后向上回收 }3、再console.log就会发现出现三个状态，并且箭头消失 这是因为手动调用 loadmore 的 onTopLoaded 事件，在加载数据后需要对组件进行一些重新定位的操作。
第四步：改变刷新时间 实际上刷新时间根据网速什么什么的原因决定，但是自己写的项目需要达到刷新效果的时候可以改变一下刷新时间，以免直接刷新结束，显示不出效果
loadTop() {//下拉刷新后向上回收 setTimeout(() => { this.$refs.loadmore.onTopLoaded(); }, 1000) },直接将上一步写的loadTop方法加一个定时器即可
第五步：箭头太大无法全部隐藏 注意：给min-loadmore-top设置，不要单独给存放箭头的span标签设置 注意：给min-loadmore-top设置，不要单独给存放箭头的span标签设置
第六步： 将下拉刷新的箭头标志更换成其他图片
<div slot="top" class="mint-loadmore-top" style="text-align:center"> <span v-show="topStatus == 'drop'" :class="{'rotate_drop': topStatus === 'drop'}" //如果状态是下拉则显示下面的图片 > <img class="arrow" src="@/assets/img/arrow_up.jpg" alt=""> </span> <span v-show="topStatus === 'loading'"> <mt-spinner class="spinner" type="fading-circle" //类型 但无法居中，因此需要设置css样式，先设置一个类名spinner v-show="topStatus == 'loading'" //如果状态为loading显示出来 color="#999" //更改颜色 :size="50" //更改尺寸 > </mt-spinner> </span> <span v-show="topStatus == 'pull'" :class="{'rotate_pull': topStatus === 'pull'}" //如果状态是向上回收则显示下面的图片 > <img class="arrow" src="@/assets/img/arrow_down.jpg" alt=""> </span> </div>第七步：mt-spinner无法居中 先设置一个类名spinner然后设置css样式
.spinner{ width: 100%; display: flex; justify-content: center; }完整代码如下： html部分
<template> <div id="my"> <mt-loadmore ref="loadmore" :top-method="loadTop" @top-status-change="handleTopChange" > <div slot="top" class="mint-loadmore-top" style="text-align:center"> <span v-show="topStatus == 'drop'" :class="{'rotate_drop': topStatus === 'drop'}" > <img class="arrow" src="@/assets/img/arrow_up.jpg" alt=""> </span> <span v-show="topStatus === 'loading'"> <mt-spinner class="spinner" type="fading-circle" v-show="topStatus == 'loading'" color="#999" :size="50" > </mt-spinner> </span> <span v-show="topStatus == 'pull'" :class="{'rotate_pull': topStatus === 'pull'}" > <img class="arrow" src="@/assets/img/arrow_down.jpg" alt=""> </span> </div> <div> 页面其他内容</div> </mt-loadmore> </div> </template>css部分
.mint-loadmore{ .mint-loadmore-top{ font-size: 42/@r; color: #999; .spinner{ width: 100%; display: flex; justify-content: center; } .arrow{ width: 38/@r; height: 42/@r; } } }js部分
data () { return { topStatus: '', } }, methods: { loadTop() {//下拉刷新后向上回收 setTimeout(() => { this.$refs.loadmore.onTopLoaded();// 如果不添加该事件，下拉刷新之后不会向上返回 }, 1000) }, handleTopChange(status) {// 查看下拉刷新状态 this.topStatus = status; console.log(status) } }