在页面中，有时为了用户体验我们希望我们的用户，不必点击分页和加载更多的按钮来加载数据，而是当加载的数据到底后，自动完成数据的加载。
这时候我们就需要用到一个很不错的angular2插件，angular2-infinite-scroll：
安装：
|
1 |
npm install angular2-infinite-scroll --save |
systemjs.config.js配置如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
map: { // our app is within the app folder app: 'app', ...... // other libraries 'rxjs': 'npm:rxjs', 'angular2-infinite-scroll': 'npm:angular2-infinite-scroll/' }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { main: './main.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, 'angular2-infinite-scroll': { main: 'angular2-infinite-scroll.js', defaultExtension: 'js' } } |
导入InfiniteScrollModule到你的module：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { InfiniteScrollModule } from 'angular2-infinite-scroll'; @NgModule({ imports: [ BrowserModule,HttpModule,InfiniteScrollModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } |
来使用一下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
import {Directive,Component, OnInit} from '@angular/core'; import { Http, Response } from '@angular/http'; import { Observable } from 'rxjs'; import { Subject } from 'rxjs/Subject'; import 'rxjs/Rx'; @Component({ selector: 'my-app', template: ` <h1>Hello {{name}}</h1> <div infinite-scroll [infiniteScrollDistance]="0" [infiniteScrollUpDistance]="50" [infiniteScrollThrottle]="300" (scrolled)="onScroll()" (scrolledUp)="onScrollUp()" > <ul *ngIf="mobiles" > <li *ngFor="let m of mobiles"> <span>{{m.id}}</span> {{m.name}} </li> </ul> </div> `, }) export class AppComponent implements OnInit{ mobiles: any[]; name = 'Angular'; constructor(public http: Http) { this.http.get("http://localhost/angluarjson.php") .toPromise() .then(response => this.mobiles=response.json()) ; } onScroll() { console.log('scrolled down!!'); this.mobiles=this.mobiles.concat(this.mobiles); } onScrollUp(){ console.log('scrolled up!!'); this.http.get("http://localhost/angluarjson.php") .toPromise() .then(response => this.mobiles=response.json()) ; } } |
onScroll函数是当窗口滚动到底部时，触发。
onScrollUp是当窗口滚动到顶部时，触发。
再来看看，我们设置的几个属性：
infiniteScrollDistance：默认为2，这个属性是配置滚动到视窗底部多少距离，才触发。
infiniteScrollUpDistance：默认为1.5，这个表达顶部到视窗的触发距离
infiniteScrollThrottle：默认为300，表达300毫秒，也就是用户滑动到目标位置后多少毫秒后，他将被触发。
服务器端
我使用的php语言：
|
1 2 3 4 5 6 7 |
<?php header('Content-Type: application/json'); header("Access-Control-Allow-Origin: *"); echo '[{"id":11,"name":"苹果"},{"id":12,"name":"三星"},{"id":13,"name":"乐视"},{"id":14,"name":"华为"},{"id":11,"name":"苹果"},{"id":12,"name":"三星"},{"id":13,"name":"乐视"},{"id":14,"name":"华为"},{"id":11,"name":"苹果"},{"id":12,"name":"三星"},{"id":13,"name":"乐视"},{"id":14,"name":"华为"},{"id":11,"name":"苹果"},{"id":12,"name":"三星"},{"id":13,"name":"乐视"},{"id":14,"name":"华为"},{"id":11,"name":"苹果"},{"id":12,"name":"三星"},{"id":13,"name":"乐视"},{"id":14,"name":"华为"},{"id":11,"name":"苹果"},{"id":12,"name":"三星"},{"id":13,"name":"乐视"},{"id":14,"name":"华为"},{"id":11,"name":"苹果"},{"id":12,"name":"三星"},{"id":13,"name":"乐视"},{"id":14,"name":"华为"},{"id":11,"name":"苹果"},{"id":12,"name":"三星"},{"id":13,"name":"乐视"},{"id":14,"name":"华为"},{"id":11,"name":"苹果"},{"id":12,"name":"三星"},{"id":13,"name":"乐视"},{"id":14,"name":"华为"},{"id":11,"name":"苹果"},{"id":12,"name":"三星"},{"id":13,"name":"乐视"},{"id":14,"name":"华为"}]'; exit(); ?> |