ionic-team / ionic-team/ionic-framework

feat: improve performance when using ion-item-sliding

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

描述

# Feature Request

**Ionic version:**

[x] **5.x**

**Describe the Feature Request**

When rendering lists of items with complex structures including `ion-item-sliding` and `ion-item-options`, DOM rendering can be incredibly expensive. This is exacerbated on mobile devices with weaker G/CPUs and less memory where rendering performance is generally slow.

It is not currently a "supported feature" to show the contents of items dynamically when sliding begins, then hide them again when sliding ends, to keep DOM node count and initial render under control.

Additionally, this makes it difficult to create custom components that use `ion-item-sliding` and insert slotted content into `ion-item-options` elements, or even insert their own, conditionally via `ng-content` or a similar composition technique.

**There are a few problems that get in the way of this:**

1. Lack of observable or event that would notify strictly on item is open or not (boolean). This can be done using the `(ionDrag)` event, but it's a bit painful.
2. Width of `options-start/end` is calculated at initial render time. If items are added/removed conditionally from these slots using `*ngIf` or the like, the window for which the sliding item will open does not adjust its width. Therefore when the item is slid open, then elements are rendered (fade in animation to make it nice), the item will snap closed again because it does not believe there is anything to show.
3. The sliding animation is jittery on many devices (seems mostly chromium based issue) which can lead to strange gestures and things snapping closed again while dragging.

**Describe Preferred Solution**

**`ion-item-sliding` should:**
1. Publish an observable or event emitter that simply reports "am I open or not".
2. Width of items should be calculated before and after `(ionDrag)` has been started. If new elements have been added, the width should be adjusted. A `ContentObserver` comes to mind so that a fixed-width pre-rendered placeholder is not required.

**Describe Alternatives**

Basically hack this in and implement it manually, which is complex and difficult to get right due to the need to set a fixed width to a placeholder element inside the `ion-item-options` component so that once sliding starts, the item will know it has contents, set a width, and stay open/not snap closed again.

**Related Code**

```














...

```

**Additional Context**

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

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