Question

希望我在这里获得更多运气，因为使用Ionic论坛我没有得到太多回应。我将提供一个视频，以显示我的问题，以便您可以看到正在发生的事情。

基本上我有一个页面，其中包含一个离子拉动刷新事件，还有一个小的固定高度离子滚动。现在，iOS没有问题但是这个bug在Android上是持久的，并且打击这个bug的唯一方法就是使用2个手指来对离子滚动进行控制。我基本上希望Android的行为与iOS相同。因此，当用户向上和向下滚动离子滚动时，它不会激活拉动刷新事件，同时触摸在离子滚动内。

<ion-view title="Sales Information">
  <ion-content id="container">
    <ion-refresher pulling-text="Pull to refresh..." on-refresh=PullToRefresh()>
    </ion-refresher>
    <ion-slide-box on-slide-changed="slideHasChanged($index)" style="margin-top: -15px;">
      <ion-slide>
        <div class="list card">
          <div id="beforeRAWData">
            <!-- Content -->
          </div>
          <ion-scroll style="max-height: {{ calcHeight }};" ng-if="deptSalesDate == '(Week)'">
            <!-- Content -->
          </ion-scroll>
          <ion-scroll style="max-height: {{ calcHeight }};" ng-if="deptSalesDate == '(Today)'">
            <!-- Content -->
          </ion-scroll>
        </div>
      </ion-slide>
    </ion-slide-box>
  </ion-content>
</ion-view>

视频显示iOS正常运行，Android失败： https://youtu.be/uYmx5Ni5dgE

希望视频可以帮助您了解我的问题。

Answer 1

这可能会有所帮助：

import { Directive, ElementRef } from '@angular/core';

/**
 * Wee need this directive to prevent page refresh on grid view scrolling
 */
@Directive({
    selector: '[scrollCatcher]'
})
export class ScrollCatcherDirective {

    private scrollElement: HTMLElement;

    constructor(private el: ElementRef) {
    }

    ngOnInit() {
        this.scrollElement = this.el.nativeElement.getElementsByClassName(
            'scroll-content',
        )[0];
        this.scrollElement.addEventListener(
            'touchstart',
            (event: TouchEvent) => {
                event.stopImmediatePropagation();
                event.cancelBubble = true;
            },
        );

        this.scrollElement.addEventListener('touchend', (event: TouchEvent) => {
            event.stopImmediatePropagation();
            event.cancelBubble = true;
        });
    }
}

并在.html文件中：

<ion-content scrollCatcher>
<ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
</ion-content>

Ionic'拉动刷新'和'离子滚动'在同一页面上出现问题[视频提供]

1 个答案: