无限滚动在旧的星云网站上不起作用

Question

我有一个基于旧版本 ngx-admin (Nebular) 的网站，我假设它是 2.1.0 版本。

新的 nebular 文档似乎不适用于我的网站，因此我尝试使用 ngx-infinite-scroll 添加无限循环功能，但未触发滚动事件。

我尝试应用的示例取自 (https://stackblitz.com/edit/ngx-infinite-scroll?file=src%2Fapp%2Fapp.module.ts)

我的组件：

//our root app component
import { Component } from "@angular/core";


@Component({
  selector: "my-app",
  styleUrls: ["./test.component.scss"],
  templateUrl: "./test.component.html"
})
export class TestComponent {
  array = [];
  sum = 100;
  throttle = 300;
  scrollDistance = 1;
  scrollUpDistance = 2;
  direction = "";
  modalOpen = false;

    constructor() {
      console.log("constructor!!");
    this.appendItems(0, this.sum);
  }

  addItems(startIndex, endIndex, _method) {
    for (let i = 0; i < this.sum; ++i) {
      this.array[_method]([i, " ", this.generateWord()].join(""));
    }
  }

  appendItems(startIndex, endIndex) {
    this.addItems(startIndex, endIndex, "push");
  }

  prependItems(startIndex, endIndex) {
    this.addItems(startIndex, endIndex, "unshift");
  }

  onScrollDown(ev) {
    console.log("scrolled down!!", ev);

    // add another 20 items
    const start = this.sum;
    this.sum += 20;
    this.appendItems(start, this.sum);

    this.direction = "down";
  }

  onUp(ev) {
    console.log("scrolled up!", ev);
    const start = this.sum;
    this.sum += 20;
    this.prependItems(start, this.sum);

    this.direction = "up";
  }
  generateWord() {
    return "Test Word";
  }

  toggleModal() {
    this.modalOpen = !this.modalOpen;
  }
}

我的html:

<h1 class="title well">
    ngx-infinite-scroll v-{{nisVersion}}
    <section>
    <small>items: {{sum}}, now triggering scroll: {{direction}}</small>
    </section>
    <section>
      <button class="btn btn-info">Open Infinite Scroll in Modal</button>
    </section>
  </h1>
  <div class="search-results"
        infinite-scroll
        [infiniteScrollDistance]="scrollDistance"
        [infiniteScrollUpDistance]="scrollUpDistance"
        [infiniteScrollThrottle]="throttle"
        (scrolled)="onScrollDown()"
        (scrolledUp)="onUp()" style="height:100%">
    <p *ngFor="let i of array">
      {{ i }}
    </p>
  </div>

有什么提示可以触发滚动事件吗？

Answer 1

嗯，终于明白了。

ngx-admin 的棘手部分是发现需要在主题文件中添加 withScroll="false" 到 nb-layout。

然后在组件文件中，这对我有用：

  @HostListener("window:scroll", ["$event"])
  onWindowScroll() {
    //In chrome and some browser scroll is given to body tag
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
      console.log("scrolled");
    }
 }

也许这会对某人有所帮助

无限滚动在旧的星云网站上不起作用

Infinite scroll not working in old Nebular site

infinite-scroll

angular5

ngx-admin

nebular