离子5中无限水平滚动端的火灾事件

Question

我正在尝试水平构建无限滚动内容。 以下代码在第一次加载时完成工作。

HTML：

  <div class="thumnails">
    <div class="list-thumbnail">
      <div class="img-thumb" *ngFor="let user of userList">
        <ion-grid>
          <ion-row>
            {{user.name}}
          </ion-row>
        </ion-grid>
      </div>
    </div>
  </div>

SCSS：

.thumnails{
    overflow-x: scroll;
    overflow-y: hidden;
    .list-thumbnail{
      height: 100%;
      white-space: nowrap;
      .img-thumb{
        display: inline-block;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 3px;
      }
    }
  }
  ::-webkit-scrollbar { 
    display: none; 
  }

在此之后，我需要在用户滚动到末尾时触发一个方法。 Ionic 具有组件ion-infinite-scroll ，它在垂直滚动中工作，但当我将它与上面的代码一起使用时它没有触发。

有没有办法在水平滚动结束时触发事件？

Answer 1

我建议尝试 ion-content 组件中的 ionScroll 事件。

1. 像这样启用 ionScroll：

   <ion-content [scrollEvents]="true" (ionScroll)="logScrolling($event)">

2. 在 logScrolling 上检查滚动是否到达特定点。 如果是这样，请向您的无限滚动内容添加更多数据：

    async logScrolling($event) { if($event.target.localName;= "ion-content") { return. } const scrollElement = await $event.target;getScrollElement(). const scrollWidth = scrollElement.scrollWidth - scrollElement;clientWidth; const threshold = 50. if(scrollWidth < threshold) { //...load data here }}

我没有测试它，但它应该像那样工作。 如果您遇到任何问题，请告诉我。

Answer 2

这是我的解决方案。 不漂亮，我没有测试它的性能问题，但它完全符合你的要求

HTML：

<ion-content>
  <div class="thumnails" (scroll)="scrollEv($event)">
    <div class="list-thumbnail">
      <div class="img-thumb" *ngFor="let user of userList">
        <span class="id" hidden>{{ user.id }}</span>
        <ion-grid>
          <ion-row>
            {{ user.name }}
          </ion-row>
        </ion-grid>
      </div>
    </div>
  </div>
</ion-content>

TS:

  userList: Array<any> = [];
  // elements count till the end of list to trigger the `getData()` function
  elementsToTrigger: number = 10;

  constructor() { }

  ngOnInit() {
    this.getData();
  }

  scrollEv(ev) {
    // get the last visible on screen element of the list by it's coordenates:
    // x => the offsetWidth of the body - 5px so it doesn't get out of boundaries
    // y => distance the list is from the top. Note that here the list is fixed at the top because it's the only element on screen, but if, at some point,
    // it will scroll or be placed at someplace else you should get this distance manually before this next line.
    let elByCoords = document.elementFromPoint(document.body.offsetWidth - 5, 0);
    let elId = elByCoords.children[0].textContent;

    // check if the last element visible on screen is the "elementsToTrigger'th to last" and if so get more data
    // here you should also check if all data has been loaded so you don't keep sending requests to your backend
    if ((this.userList.length - this.userList.findIndex(user => user.id === +elId)) <= this.elementsToTrigger) {
      this.getData();
    }
  }

  getData() {
    // here goes your logic to retrieve more results from database.
    let startAt: number = this.userList?.length || 0;
    let arr = [];
    for (let i = startAt; i < startAt + 50; i++) {
      arr.push({ id: i, name: `User ${i}` });
    }
    this.userList = (this.userList || []).concat(arr);
  }

您可能需要稍微玩一下document.elementFromPoint(x, y)才能找到正确的值