Ionic 3 iOS端滑动ion-slide时如何禁用垂直滚动？

我之前在Ionic 3项目里也碰到过这个糟心的问题！iPhone上滑动滑块时总是误触发页面垂直滚动，严重影响用户体验。试过各种谷歌搜到的方案都没用？别慌，下面几个我亲测有效的方法你可以试试：

方案1：配置Swiper参数拦截事件 #

Ionic 3的ion-slides底层依赖Swiper，直接修改Swiper的配置就能从根源上阻止事件冒泡到页面滚动：

首先在页面组件的.ts文件里定义滑块配置：

export class YourPage {
  slideOptions = {
    direction: 'horizontal',
    touchMoveStopPropagation: true, // 阻止触摸事件冒泡
    preventInteractionOnTransition: true, // 滑块切换时禁止其他交互
    touchReleaseOnEdges: false, // 滑到边缘时不释放触摸事件
    allowTouchMove: true // 允许触摸滑动
  };

  // ...其他代码
}

然后在模板的ion-slides上绑定这个配置：

<ion-slides [options]="slideOptions">
  <ion-slide>
    <!-- 你的滑块内容 -->
  </ion-slide>
  <ion-slide>
    <!-- 你的滑块内容 -->
  </ion-slide>
</ion-slides>

这个配置会让Swiper优先处理水平滑动事件，避免触发页面的垂直滚动。

方案2：自定义指令拦截垂直触摸 #

如果方案1没效果，可以写一个简单的Angular指令，精准拦截垂直方向的触摸行为：

创建prevent-vertical-scroll.directive.ts文件：

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

@Directive({
  selector: '[preventVerticalScroll]'
})
export class PreventVerticalScrollDirective {
  private startX: number;
  private startY: number;

  @HostListener('touchstart', ['$event'])
  onTouchStart(event: TouchEvent) {
    // 记录触摸起始位置
    this.startX = event.touches[0].clientX;
    this.startY = event.touches[0].clientY;
  }

  @HostListener('touchmove', ['$event'])
  onTouchMove(event: TouchEvent) {
    const deltaX = Math.abs(event.touches[0].clientX - this.startX);
    const deltaY = Math.abs(event.touches[0].clientY - this.startY);

    // 如果垂直滑动幅度大于水平，阻止默认滚动行为
    if (deltaY > deltaX) {
      event.preventDefault();
      event.stopPropagation();
    }
  }
}

在页面模块里声明这个指令，然后在ion-slides上添加指令属性：

<ion-slides preventVerticalScroll [options]="slideOptions">
  <!-- 滑块内容 -->
</ion-slides>

这个指令会判断用户的触摸方向，只允许水平滑动触发滑块切换，垂直滑动直接被拦截。

方案3：关闭Ionic滚动辅助功能 #

有时候Ionic默认的滚动辅助功能会和Swiper冲突，你可以在app.module.ts里关闭这些功能：

import { IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';

@NgModule({
  imports: [
    IonicModule.forRoot(MyApp, {
      scrollAssist: false, // 关闭滚动辅助
      autoFocusAssist: false, // 关闭自动聚焦辅助
      ios: {
        scrollPadding: false,
        scrollAssist: false // 针对iOS单独配置
      }
    })
  ],
  // ...其他配置
})
export class AppModule {}

我当时是结合方案1和方案2解决了这个问题，你可以逐个尝试，应该能解决iPhone上的滑动冲突问题。

内容的提问来源于stack exchange，提问作者Mohamed Arshath