ionic-team / ionic-team/ionic-framework

feat: add progress/delta event to ion-router-outlet swipe-to-go-back gesture

未关闭
#30,897 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
triage
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 15 小时
30 天内合并 PR
51

描述

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already include this feature request, without success.

### Describe the Feature Request

Currently, in Ionic 8, there is no native way to synchronize UI elements (like a global bottom **ion-tab-bar** or custom floating buttons) with the interactive "**swipe-to-go-back**" gesture. On iOS, when a user swipes back from a page that has no bottom bar to a previous page that does (or vice versa), the transition is abrupt. There is no hook to listen to the deltaX or progress (0 to 1) of the swipe to animate these elements proportionally.
Describe the solution you'd like
I would like **IonRouterOutlet** (or a global config) to provide an **Observable** or Event Listener that emits real-time data during a navigation gesture.
Ideally, it would emit an object such as:

```
interface SwipeBackProgress {
state: 'start' | 'moving' | 'end' | 'cancelled';
progress: number; // 0 to 1
deltaX: number;
}
```

### Describe the Use Case

Many modern apps (like Instagram or Spotify) hide or transform global UI elements (like the music player bar or tabs) in sync with the swipe-back gesture. In Ionic, because the ion-tab-bar often lives outside the ion-router-outlet, it remains static while the page content slides, breaking the native "stack" illusion.

### Describe Preferred Solution

Providing a swipeProgress emitter would allow developers to do things like:

```
this.routerOutlet.swipeProgress$.subscribe(ev => {
this.bottomBar.style.transform = `translateY(${ev.progress * 100}%)`;
});
```

### Describe Alternatives

**Manual GestureController**: Creating a custom GestureController on every page to track the edge swipe. This is redundant as it conflicts with Ionic’s internal gesture and is difficult to maintain.

**MutationObserver**: Watching for .ion-page-hidden class changes. This only tells us when a swipe starts, not the size or progress of the swipe.

**Global CSS**: Using CSS transitions, which do not track the user's finger, resulting in a non-native "rubber-banding" feel.

### Related Code

_No response_

### Additional Information

_No response_

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。