角度4：無限滾動不起作用

我嘗試過使用ngx-infinite-scroll（https://www.npmjs.com/package/angular2-infinite-scroll）以及其他一些指令，但似乎沒有任何效果。角度4：無限滾動不起作用

的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

導入完成

個

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'); 
    } 
}

使用主機監聽器，以及嘗試，但scroll事件似乎沒有發生。它與我正在使用無限滾動應用的課程有什麼關係？

來源

2017-05-11 Sanchit Tandon

你必須設置你的div容器

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

來源

2017-06-07 08:49:52

的document裏面已經提及的高度。

默認情況下，該指令偵聽窗口滾動事件，並且調用回調。爲了觸發回調當實際元件滾動時，這些設置應配置：

[滾屏] =「假」

設置一個顯式的CSS「高度」值到元件

因此，只需將高度：100％放在您的容器上，您將看到滾動的射擊。

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!!') 
    } 
}

來源

2017-07-04 07:18:20 trungk18

哇，感謝滾屏提示！這花了我幾個小時！ :) – dave0688

 <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-結果{ 高度：100％溢出-γ：滾動; }

使用上面的HTML代碼，它工作正常 - angular2 infinite scroll

來源

2017-10-04 06:24:09

角度4：無限滾動不起作用

回答

相關問題