14

我曾尝试使用 ngx-infinite-scroll （https://www.npmjs.com/package/angular2-infinite-scroll）以及其他一些指令，但似乎没有一个有效。

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

用户模块.ts

导入完成

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

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

用户.component.ts

export class UserComponent {

  constructor() {}

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

也尝试使用主机侦听器，但滚动事件似乎没有发生。它与我正在使用的应用无限滚动的类有什么关系吗？

4

3 回答 3

25

文件里面已经提到过。

默认情况下，该指令监听窗口滚动事件并调用回调。要在实际元素滚动时触发回调，应配置以下设置：

  1. [滚动窗口]="假"
  2. 为元素设置一个明确的 css“高度”值

因此，只需将 height: 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-04T07:18:20.150 回答
2 
       <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-results{ 高度：100% 溢出-y：滚动；}

使用上面的 HTML 代码可以正常工作——ngx-infinite-scroll

于 2017-10-04T06:24:09.657 回答
0

您必须设置容器 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-07T08:49:52.583 回答