wake-up-neo.com

Winkel 4: Endlos-Scroll funktioniert nicht

Ich habe es mit ngx-infinite-scroll ( https://www.npmjs.com/package/angular2-infinite-scroll ) und auch mit einigen anderen Anweisungen versucht, aber es scheint keine zu funktionieren.

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

Der Import ist abgeschlossen

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

Ich habe es auch mit dem Host-Listener versucht, aber das Scroll-Ereignis scheint nicht aufzutreten. Hat es etwas mit der Klasse zu tun, die ich verwende, auf die die unendliche Bildlaufleiste angewendet wird?

10
Sanchit Tandon

Im Dokument hat ungefähr erwähnt.

Standardmäßig überwacht die Direktive das Fenster-Scroll-Ereignis und ruft den Rückruf auf. Um den Rückruf auszulösen, wenn das eigentliche Element wird gescrollt, sollten diese Einstellungen konfiguriert werden:

  1. [scrollWindow] = "false"
  2. legen Sie einen expliziten css-Wert für die Höhe für das Element fest

Setzen Sie daher einfach die Höhe: 100% auf Ihren Container und Sie werden sehen, dass der Bildlauf ausgelöst wird. 

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

.Suchergebnisse{ Höhe: 100% overflow-y: scrollen; }

verwenden Sie den obigen HTML-Code. Es funktioniert gut - ngx-infinite-scroll

1
Rajesh Pandhare

Sie müssen die Höhe Ihres Container div einstellen

<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>
0
Dragan M.