ant-mobile的PullToRefresh组件的使用方法

html代码:
onRefresh:必选, 刷新回调函数
direction:拉动方向,可以是 up 或 down
endReachedRefresh:滚动到底时自动刷新(direction=down)

		
            //我的列表项
            
          

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);   //数据请求函数
    }
}

你可能感兴趣的:(angular)