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

【问题标题】：Fire event at Infinite horizontal scroll end in ionic 5离子5中无限水平滚动端的火灾事件
【发布时间】：2022-02-09 04:09:49
【问题描述】：

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

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，它可以在垂直滚动中使用，但是当我将它与上述代码一起使用时它不会触发。

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

【问题讨论】：

标签： css ionic-framework infinite-scroll horizontal-scrolling ionic5

【解决方案1】：

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

启用 ionScroll like：

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

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

【讨论】：

【解决方案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) 才能找到正确的值

【讨论】：