Mint UI—loadmore—Pull down下拉刷新
第一步:在官网复制所需代码
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)