html代码:
onRefresh:必选, 刷新回调函数
direction:拉动方向,可以是 up 或 down
endReachedRefresh:滚动到底时自动刷新(direction=down)
<PullToRefresh (onRefresh)="pullToRefresh($event)"
[(ngModel)]="state.refreshState"
[direction]="state.direction"
[endReachedRefresh]="state.endReachedRefresh"
style="height: calc(100vh - 170px);line-height: 30px">
//我的列表项
<app-list [columns]="columns" [rows]="tabNameList" (showList)="showList($event)"></app-list>
</PullToRefresh>
ts代码:
//导入组件库
import { Component, OnInit } from '@angular/core';
export class CampusSecurityPage extends BasePopComponent implements OnInit {
//当前页数
public pageNumber = 1;
//数据总页数,加载数据的地方赋值
public totalPage;
//初始化状态
public state = {
refreshState: {
// 刷新的状态,有三种模式
// deactivate(拉动刷新)、finish(完成刷新)、release(刷新中)
currentState: 'deactivate',
drag: false,
//默认不自动刷新
endReachedRefresh: false,
},
// 拉动方向,初始化为空,可以是 up 或 down,
// up (阻止下拉动作)、down(阻止上拉动作)
direction: ''
};
/**
* 加载数据
*/
pullToRefresh(event) {
//判断当前操作是下拉还是上拉
(event === 'down') ? this.pageNumber = 1 : this.pageNumber++;
setTimeout(() => {
//刷新数据
this.refreshData();
}, 500);
}
/**
* 刷新数据
*/
refreshData() {
//判断数据是否加载完毕
if (this.totalPage < this.pageNumber) {
//如果数据已经加载完毕,改变当前刷新状态,阻止上拉动作
// this.state.refreshState.currentState = 'finish';
this.state.refreshState.currentState = 'release';
setTimeout(() => {
this.state.refreshState.currentState = 'finish';
}, 1000);
this.state.direction = 'down'
return;
}
//如果数据未加载完毕,重新请求数据,url为请求地址
this.requestData(url); //数据请求函数
}
}