Góc 4: Cuộn vô hạn không hoạt động

Question

Tôi đã thử sử dụng ngx-vô hạn-cuộn (https://www.npmjs.com/package/angular2-infinite-scroll) và một số chỉ thị khác nhưng dường như không có tác dụng.

package.json

"dependencies": { 
"@angular/animations": "^4.0.2", 
"@angular/common": "^4.0.0", 
"@angular/compiler": "^4.0.0", 
"@angular/compiler-cli": "^4.0.2", 
"@angular/core": "^4.0.0", 
"@angular/forms": "^4.0.0", 
"@angular/http": "^4.0.0", 
"@angular/platform-browser": "^4.0.0", 
"@angular/platform-browser-dynamic": "^4.0.0", 
"@angular/platform-server": "^4.0.2", 
"@angular/router": "^4.0.0", 
"absurd": "^0.3.8", 
"angular2-masonry": "^0.4.0", 
"animate.css": "^3.5.2", 
"bootstrap": "^3.3.7", 
"core-js": "^2.4.1", 
"font-awesome": "^4.7.0", 
"jquery": "^3.2.1", 
"jquery-slimscroll": "^1.3.8", 
"metismenu": "^2.7.0", 
"ng2-bs3-modal": "^0.10.4", 
"ngx-infinite-scroll": "^0.5.1", 
"rxjs": "^5.1.0" 
} 

user.component.html

<div class="row" infiniteScroll [infiniteScrollDistance]="0" 
    [infiniteScrollThrottle]="300" (scrolled)="loadMore()"> 
    <div class="col-md-3 col-sm-4" *ngFor="let user of userList"> 
    <span>{{user.name}} ({{user.email}})</span> 
    </div> 
</div> 

user.module.ts

Việc nhập khẩu được thực hiện

import { InfiniteScrollModule } from 'ngx-infinite-scroll'; 

@NgModule({ 
    imports: [ 
    CommonModule, 
    FormsModule, 
    InfiniteScrollModule 
    ], 
    declarations: [UserComponent], 
    providers: [], 
    exports: [], 
}) 
export class UserModule { } 

user.component.ts

export class UserComponent { 

    constructor() {} 

    loadMore() { 
    console.log('method begins'); 
    } 
} 

Cố gắng sử dụng máy chủ nghe cũng nhưng sự kiện cuộn chỉ dường như không xảy ra. Có liên quan gì đến lớp tôi đang sử dụng mà cuộn vô hạn được áp dụng không?

Answer 1

Bạn phải thiết lập chiều cao của div container của bạn

<div class="row" style="height: 90%" 
    infiniteScroll [infiniteScrollDistance]="0" 
    [infiniteScrollThrottle]="300" (scrolled)="loadMore()"> 
    <div class="col-md-3 col-sm-4" *ngFor="let user of userList"> 
    <span>{{user.name}} ({{user.email}})</span> 
    </div> 
</div> 

Answer 2

Bên trong document đã đề cập về.

Theo mặc định, chỉ thị nghe sự kiện cuộn cửa sổ và gọi hàm gọi lại. Để kích hoạt callback khi các yếu tố thực tế là cuộn, các thiết lập này nên được cấu hình:

1. [scrollWindow] = "false"
2. thiết lập một css "height" giá trị explict tới phần tử

Do đó, chỉ cần đặt chiều cao: 100% trên vùng chứa của bạn và bạn sẽ thấy cuộn được cuộn.

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app', 
    styles: [ 
     `.search-results { 
      height: 20rem; 
      overflow: scroll; 
     }` 
    ], 
    template: ` 
     <div class="search-results" 
      infiniteScroll 
      [infiniteScrollDistance]="2" 
      [infiniteScrollThrottle]="500" 
      (scrolled)="onScroll()" 
      [scrollWindow]="false"> 
     </div> 
    ` 
}) 
export class AppComponent { 
    onScroll() { 
     console.log('scrolled!!') 
    } 
} 

Answer 3

 <div 
     [infiniteScrollDistance]="2" 
     [infiniteScrollUpDistance]="1.5" 
     [infiniteScrollThrottle]="100" 
     (scrolled)="onScrollDown()" 
     [scrollWindow]="false"class="search-results"> 
     <div *ngFor="let user of userList"> 
     <span>{{user.name}} ({{user.email}})</span> 
     </div> 
     </div> 

.search-kết quả { height: 100% overflow-y: di chuyển; }

sử dụng trên HTML code nó hoạt động tốt - angular2 infinite scroll