Ionic中如何修改页面滑动切换方向？

首先，先帮你排查一个可能的低级错误：你代码里的if(event.direction =...)应该是===而不是=！单等号是赋值操作，会导致这个条件永远为true，这大概率是你不管怎么滑都只触发同一个页面跳转的核心原因之一，先把这个修正过来。

接下来针对你要实现的「左滑时页面从左侧出现，右滑时从右侧出现」的需求，有两种常用方案，你可以根据自己的页面栈需求选择：

方案一：自定义导航动画（适合需要页面栈的场景） #

Ionic默认的push动画是新页面从右侧滑入，所以要实现不同方向的滑入效果，需要自定义动画类：

1. 创建自定义动画文件 #

在你的项目中新建一个custom-animations.ts文件，写入两个动画函数：

import { Animation, AnimationController } from '@ionic/angular';

// 页面从左侧滑入的动画
export function leftSlideEnter(animationCtrl: AnimationController, baseEl: HTMLElement) {
  return animationCtrl.create()
    .addElement(baseEl)
    .duration(300)
    .fromTo('transform', 'translateX(-100%)', 'translateX(0)')
    .fromTo('opacity', '0', '1');
}

// 页面从右侧滑入的动画
export function rightSlideEnter(animationCtrl: AnimationController, baseEl: HTMLElement) {
  return animationCtrl.create()
    .addElement(baseEl)
    .duration(300)
    .fromTo('transform', 'translateX(100%)', 'translateX(0)')
    .fromTo('opacity', '0', '1');
}

2. 在页面中使用自定义动画 #

修改你的page.ts代码，注入AnimationController，并在滑动事件中根据方向选择对应动画：

import { Component } from '@angular/core';
import { NavController, AnimationController } from '@ionic/angular';
import { Page1 } from '../page1/page1';
import { Page2 } from '../page2/page2'; // 假设左滑跳转到Page2
import { leftSlideEnter, rightSlideEnter } from './custom-animations';

@Component({
  selector: 'app-home',
  templateUrl: 'page.html',
  styleUrls: ['page.scss'],
})
export class HomePage {
  constructor(
    private navCtrl: NavController,
    private animationCtrl: AnimationController
  ) {}

  swipe(event) {
    // 修正判断条件为全等运算符
    if (event.direction === 2) { 
      // 右滑：页面从右侧进入
      this.navCtrl.push(Page1, {}, {
        animationBuilder: () => rightSlideEnter(
          this.animationCtrl, 
          document.querySelector('ion-router-outlet') as HTMLElement
        )
      });
    }
    if (event.direction === 4) { 
      // 左滑：页面从左侧进入
      this.navCtrl.push(Page2, {}, {
        animationBuilder: () => leftSlideEnter(
          this.animationCtrl, 
          document.querySelector('ion-router-outlet') as HTMLElement
        )
      });
    }
  }
}

方案二：使用Ion Slides组件（适合无页面栈的左右切换场景） #

如果你的需求只是左右滑动切换不同页面，不需要页面栈的前进后退逻辑，直接用Ionic的ion-slides组件会更简单，它自带原生的左右滑动动画：

修改page.html： #

<ion-slides [options]="slideOpts">
  <!-- 左滑显示的页面 -->
  <ion-slide>
    <ion-content padding>
      <!-- Page2的内容 -->
    </ion-content>
  </ion-slide>
  <!-- 默认显示的当前页面 -->
  <ion-slide>
    <ion-content padding class="home_content">
      <!-- 当前页面的内容 -->
    </ion-content>
  </ion-slide>
  <!-- 右滑显示的页面 -->
  <ion-slide>
    <ion-content padding>
      <!-- Page1的内容 -->
    </ion-content>
  </ion-slide>
</ion-slides>

修改page.ts： #

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'page.html',
  styleUrls: ['page.scss'],
})
export class HomePage {
  // 配置滑动选项，默认显示中间的页面
  slideOpts = {
    initialSlide: 1,
    speed: 300,
    allowTouchMove: true
  };
}

这种方案不需要手动处理滑动事件，组件会自动帮你完成左右切换和动画，非常省心。

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