ionic-team / ionic-team/ionic-framework

feat: collapse toolbars on scroll

未关闭
#23,816 1 条评论 7 个 reaction 已指派 0 人 在 GitHub 查看
package: core type: feature request
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 15 小时
30 天内合并 PR
51

描述

### Prequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/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

Provide ability to hide ion-header (Appbar) on scroll

### Describe the Use Case

Given the very limited screen space available on mobile devices, hiding header / appbar on scroll has become a standard feature for lot of apps. Its common across major popular apps.

We have a video list screen, and need to hide the top header along with back button and search bar on scroll.

### Describe Preferred Solution

Ion-header which supports hide on scroll.

Most of good mobile component libraries comes with the ability, be it [vuetify](https://vuetifyjs.com/en/components/app-bars/) or [Framework7](https://v1.framework7.io/docs/hide-bars-on-scroll.html)

This is so common, that many apps end up developing their own solutions, which are some times not as performant or smooth. Many developers have asked the solutions on ionic forums and stackoverflow about how to implement this. and many end up doing it in poor then ideal way

This is one of the must have feature for a rich mobile UI component library.

### Describe Alternatives

None. Need to manually implement by listening scroll events.

### Related Code

_No response_

### Additional Information

_No response_

贡献指南

打开贡献指南

调研方向

Start with the ion-header component entry point and review how scrolling is currently handled, using the issue’s manual scroll-listener approach as context. Clarify the collapse and restore behavior for the video-list use case; done means the header, back button, and search bar can hide on scroll without each app needing its own implementation.

由索引模型根据 Issue 内容生成。

评估

技术栈
typescript
领域
frontend, mobile
Issue 类型
功能
难度
5/5
预计耗时
一周以上
活跃度
停滞
描述清晰度
需要澄清
新手友好度
30/100

把新 issue 发到你的邮箱

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