angular2--下拉更新和上拉加载更多

效果如下：
（1）页面往下拉做刷新页面操作
（2）页面往上滑到底部时，加载更多数据## 标题

html

<ons-page>
	<ons-toolbar>
		<div class="left">div>
		<div class="center">上拉加载下拉更新div>
		<div class="right">div>
	ons-toolbar>
	<div class="background">div>
	<div class="content"  #scrollContent (scroll)="scroll()">
		
		<ons-pull-hook height="35px" threshold-height="128px" (changestate)="onChangeState($event)" (action)="onAction($event)">
			{{pullMessage}}
		ons-pull-hook>
		
		<div class="scroll-cnt">
			<div class="lists" *ngFor='let i of listsInit'>
				<img src="{{i.img}}" />
				<p>{{i.name}}p>
			div>
			
			<div *ngIf="moreData">
				<p class="r-more">{{loading}}p>
			div>
			
		div>	
	div>
ons-page>

ts

export class Tab2 {
	listsInit: any = []; //初始化数据
	listsMore: any = []; //下拉加载更多数据
	
	
	//下拉刷新
	pullMessage: string;
	isLoading: boolean;
	
	
	//上拉加载更多
	@ViewChild("scrollContent") scrollContent; //滚动的内容区域
	moreData: boolean = true; //是否有更多数据
	loading:any='下拉加载更多...'

	constructor(private navigator: OnsNavigator,
		private httpService: HttpService) {}

	ngOnInit() {
		//初始化数据
		this.listsInit = [{
				id: 1,
				img: './assets/img/pic/f1.png',
				name: '美食1'
			},
			{
				id: 2,
				img: './assets/img/pic/f1.png',
				name: '美食2'
			},
			{
				id: 3,
				img: './assets/img/pic/f1.png',
				name: '美食3'
			},
			{
				id: 4,
				img: './assets/img/pic/f1.png',
				name: '美食4'
			},
			{
				id: 5,
				img: './assets/img/pic/f1.png',
				name: '美食5'
			},
			{
				id: 6,
				img: './assets/img/pic/f1.png',
				name: '美食6'
			},
			{
				id: 7,
				img: './assets/img/pic/f1.png',
				name: '美食7'
			},
			{
				id: 8,
				img: './assets/img/pic/f1.png',
				name: '美食8'
			},
			{
				id: 9,
				img: './assets/img/pic/f1.png',
				name: '美食9'
			},

		]
		//下拉加载更多数据
		this.listsMore = [{
			id: 1,
			img: './assets/img/pic/f2.png',
			name: '美食1'
		}, {
			id: 2,
			img: './assets/img/pic/f2.png',
			name: '美食2'
		}, {
			id: 3,
			img: './assets/img/pic/f2.png',
			name: '美食3'
		}, {
			id: 4,
			img: './assets/img/pic/f2.png',
			name: '美食4'
		}, {
			id: 5,
			img: './assets/img/pic/f2.png',
			name: '美食5'
		}, {
			id: 6,
			img: './assets/img/pic/f2.png',
			name: '美食6'
		}, {
			id: 7,
			img: './assets/img/pic/f2.png',
			name: '美食7'
		}, {
			id: 8,
			img: './assets/img/pic/f2.png',
			name: '美食8'
		}, {
			id: 9,
			img: './assets/img/pic/f2.png',
			name: '美食9'
		}, ]
	}


    /*下拉刷新*/
    onAction($event) {
    	setTimeout(() => {
    		$event.done();
    		if(this.isLoading) {
    			return;
    		}
    		this.isLoading = true;
    		
    	}, 1000);
    }
    onChangeState($event) {
    	switch($event.state) {
    		case 'initial':
    			this.pullMessage = '下拉刷新';
    			break;
    		case 'preaction':
    			this.pullMessage = '松开刷新';
    			break;
    		case 'action':
    			this.pullMessage = '加载数据...';
    			//在这里做下拉操作
    			break;
    	}
    }
	

	/*上拉加载更多*/
	scroll() {
		const floor = Math.floor(this.scrollContent.nativeElement.scrollTop + this.scrollContent.nativeElement.clientHeight)
		const ceil = Math.ceil(this.scrollContent.nativeElement.scrollTop + this.scrollContent.nativeElement.clientHeight)
		const round = Math.round(this.scrollContent.nativeElement.scrollTop + this.scrollContent.nativeElement.clientHeight)
		const scrollHeight = this.scrollContent.nativeElement.scrollHeight
		if(floor == scrollHeight || ceil == scrollHeight || round == scrollHeight) {
			if(this.moreData) {
				this.loading = '加载中...';
				//在下面就可以做上拉加载操作啦
				
				//此操作会循环多次添加数组数据,实际情况要按照各自项目需求来写
				for(var i=0;i<this.listsMore.length;i++){
					this.listsInit.push(this.listsMore[i])
				}
			}
		}
	}
}

css

.lists{
	width: 100%;
	height: 89px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	box-sizing: border-box;
	padding: 20px;
	background-color: #fff;
	border-bottom: 1px solid #f2f2f2;
}

.lists img{
	width: 60px;
	height: 60px;
	margin-right: 15px;
}


.scroll-cnt {
	width: 100%;
	height: 100%;
	background: #eeeeee;
}

/*更多*/

.r-more {
	text-align: center;
	font-size: 15px;
	padding: 5px 0;
	color: #4a90e2;
}