html5 自动加载数据,angular2 移动到底部数据自动加载

在页面中，有时为了用户体验我们希望我们的用户，不必点击分页和加载更多的按钮来加载数据，而是当加载的数据到底后，自动完成数据的加载。

这时候我们就需要用到一个很不错的angular2插件，angular2-infinite-scroll：

安装：

npm install angular2-infinite-scroll --save

1

npminstallangular2-infinite-scroll--save

systemjs.config.js配置如下：

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'

}

}

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：

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

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]

})

exportclassAppModule{}

来使用一下：

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: `

Hello {{name}}

infinite-scroll

[infiniteScrollDistance]="0"

[infiniteScrollUpDistance]="50"

[infiniteScrollThrottle]="300"

(scrolled)="onScroll()"

(scrolledUp)="onScrollUp()"

>

• {{m.id}} {{m.name}}

`,

})

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())

;

}

}

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:`

Hello{{name}}

infinite-scroll

[infiniteScrollDistance]="0"

[infiniteScrollUpDistance]="50"

[infiniteScrollThrottle]="300"

(scrolled)="onScroll()"

(scrolledUp)="onScrollUp()"

>

• {{m.id}}{{m.name}}

`,

})

exportclassAppComponentimplementsOnInit{

mobiles:any[];

name='Angular';

constructor(publichttp: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语言：

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();

?>

1

2

3

4

5

6

7

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();

?>