import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h2>Virtual Scroll</h2> <eui-panel> <eui-virtual-scroll [style.height.px]="height" [data]="data" [total]="total" [pageNumber]="pageNumber" [pageSize]="pageSize" [rowHeight]="rowHeight" (update)="items=$event"> <div *ngFor="let item of items" class="item f-row"> <div class="num">{{item.id}}</div> <div> <div class="name">{{item.name}}</div> <div class="desp">{{item.desp}}</div> </div> </div> </eui-virtual-scroll> </eui-panel> `, styles: [` .item { height: 60px; border-bottom: 1px solid #ddd; padding: 10px 0; } .item .num{ width: 40px; height: 40px; background: #b8eecf; border-radius: 20px; text-align: center; line-height: 40px; margin: 0 10px; } .item .name{ font-size: 16px; font-weight: bold; line-height: 22px; } .item .desp{ color: #666; line-height: 18px; } `] }) export class AppComponent { height: number = 250; total: number = 10000; data: any[] = []; pageNumber: number = 1; pageSize: number = 10; rowHeight: number = 60; ngOnInit() { for(let i=0; i<this.total; i++){ this.data.push({ id: i, name: 'name'+i, addr: 'address'+i, desp: 'description'+i }); } } }
import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { HttpModule } from '@angular/http'; import { EasyUIModule } from 'easyui/easyui/easyui.module'; import { AppComponent } from './app.component'; @NgModule({ bootstrap: [ AppComponent ], declarations: [ AppComponent ], imports: [ FormsModule, BrowserModule, HttpModule, EasyUIModule ] }) export class AppModule { }
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; enableProdMode(); platformBrowserDynamic().bootstrapModule(AppModule);