Mint-UI中的上拉刷新下拉加载更多

https://mint-ui.github.io/docs/#/zh-cn2/loadmore

1. <mt-loadmore></nt-loadmore>标签写在vue文件<template>

标签的根目录

2.

/* 重新加载数据 */

loadTop() {

this.page = 1

this.getData()

this.$refs.loadmore.onTopLoaded();

},

/* 加载更多数据 */

loadBottom() {

this.getData()

this.$refs.loadmore.onBottomLoaded();

},

/* 请求数据函数 */

getData() {

this.allLoaded = false // 当 刷新时 可进行下拉

user.msgs.r({page: this.page}).then( ( res=>{ // 请求接口获取数据

let ret=res.data;

if( ret.error == 0){

if( this.page == 1 ) { // 当为第一页时直接赋值 否则 追加

this.dataList= ret.data.data;

}else {

this.dataList= this.dataList.concat(ret.data.data);

}

// 当 返回数据大于等于 20 条时 说明还有下一页

if(ret.data.data.length>=20) {

this.page++

}else {

this.allLoaded = true; //若数据已全部获取完毕 禁止底部上拉函数执行

}

}

}))

}