Mint UI—loadmore—Pull down下拉刷新之后不向上回收（图文详情）

Mint UI—loadmore—Pull down下拉刷新

第一步：在官网复制所需代码
loadmore

<mt-loadmore
      @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: {
      handleTopChange(status) {
        this.topStatus = status;
        //此处将获取到的状态赋值给topStatus，在第一步给出的代码的span标签里进行调用，
        用来判断状态到底是下拉加载还是已经刷新结束并执行相应的动作
        console.log(status)
       // 可以console.log看一下三个状态分别是什么
      }
    }

console.log发现只有两个状态，而没有pull，并看图发现下拉之后并没有向上回收，还能看到下拉箭头，这时只要执行top-method方法就可以，那么怎么执行呢，看图
1、在dom里操作

2、添加方法

3、再console.log就会发现出现三个状态，并且箭头消失