npm install vue-pull-to --save
//然后引进来,放在组件上面注册好
import PullTo from ‘vue-pull-to’
官网文档在这里:https://github.com/stackjie/vue-pull-to/blob/master/README.zh-CN.md
页面内容:
<template>
<div id="pullContain">
<pull-to @infinite-scroll="getMoreList" class="file-lists">
<ul>
<li v-for="(fileItem,index) in filesList.fileList" :key="index" @click="dealFile(fileItem)">
</li>
<span class="show-msg" v-show="filesList.recordCount==0">这里什么都没有了哦</span>
</ul>
</pull-to>
</div>
</template>
<script>
import PullTo from 'vue-pull-to'
import { fetchDataList } from 'api'
export default {
name: 'example',
components: {
PullTo
},
data() {
return {
dataList: []
}
},
methods: {
refresh(loaded) {
fetchDataList()
.then((res) => {
this.dataList = res.data.dataList
loaded('done')
})
}
}
}
</script>
js:
// 下滑刷新
getMoreList: async function(loaded) {
console.log(12312312);
let _self = this;
this.pageNum++;
_self.isShowLoading = true;
var params = {
// familyId: this.familyId,
pageNum: this.pageNum
// iconOption: 1,
// pageSize: this.pageSize
};
try {
let { data } = await _self.$http.get(
`/authquerytask?from=${this.pageNum}&to=5`
);
_self.tableData.push(data); //push进去渲染
// _self.tableData = data;
console.log("_self.tableData", _self.tableData);
_self.isShowLoading = false;
if (data.result == "success") {
_self.tableData = data.data;
console.log(" _self.tableData", _self.tableData);
} else {
this.$message({
type: "warning",
message: "获取数据失败,请检查后重试"
});
}
} catch (err) {
console.log(err);
}
},
组件会默认占据父元素的百分之百高度。props top-load-method和bottom-load-method会默认传进一个loaded参数,该参数是一个改变组件加载状态的函数,必须调用一次loaded不然组件就会一直处于加载状态,如果执行loaded(‘done’)组件内部状态就会变成成功加载的状态,loaded(‘fail’)为失败。
就是必须父元素要设置高度!!!!