ionic-team / ionic-team/ionic-framework

feat: improve performance when using ion-item-sliding

Đang mở
#23,155 42 bình luận 4 reaction 0 người được giao Xem trên GitHub
package: core type: feature request
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

# 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**

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.