ion-virtual-scroll
Virtual Scroll hiển thị một danh sách ảo, "vô hạn". Một mảng bản ghi được chuyển tới cuộn ảo(virtual scroll) chứa dữ liệu để tạo mẫu cho. Mẫu được tạo cho mỗi bản ghi, được gọi là ô, có thể bao gồm các mục, đầu trang và chân trang. Vì lý do hiệu suất, không phải mọi bản ghi trong danh sách đều được hiển thị cùng một lúc; thay vào đó, một tập hợp con nhỏ các bản ghi (đủ để lấp đầy khung nhìn) được hiển thị và sử dụng lại khi người dùng cuộn.
Approximate Widths and heights(độ rộng và chiều cao ước tính)
Nếu chiều cao của các mục trong virtual scroll không gần với kích thước mặc định của 40px, thì điều cực kỳ quan trọng là phải cung cấp giá trị cho thuộc tính approxItemHeight. Kích thước pixel hoàn hảo chính xác là không cần thiết, nhưng nếu không có ước tính, virtual scroll sẽ không hiển thị chính xác.
Chiều rộng và chiều cao gần đúng của mỗi mẫu được sử dụng để giúp xác định số lượng ô sẽ được tạo và giúp tính toán chiều cao của vùng có thể cuộn(scrollable). Lưu ý rằng kích thước được hiển thị thực tế của mỗi ô đến từ CSS của ứng dụng, trong khi giá trị gần đúng này chỉ được sử dụng để giúp tính toán các kích thước ban đầu.
Cũng cần biết rằng kích thước vật phẩm mặc định của Ionic có chiều cao hơi khác nhau giữa các nền tảng, điều này hoàn toàn ổn.
Images Within Virtual Scroll( hình ảnh trong thanh cuộn )
Các yêu cầu HTTP(HTTP requests,), giải mã hình ảnh(image decoding) và kết xuất hình ảnh(image decoding) có thể gây ra hiện tượng giật khi cuộn. Để kiểm soát hình ảnh tốt hơn, Ionic cung cấp <ion-img> để quản lý các yêu cầu HTTP và kết xuất hình ảnh. Trong khi cuộn qua các mục một cách nhanh chóng, hãy <ion-img>biết khi nào và khi nào không nên thực hiện yêu cầu, khi nào và khi nào không hiển thị hình ảnh và chỉ tải những hình ảnh có thể xem được sau khi cuộn.Đọc thêm về ion-img.
Điều quan trọng đối với các nhà phát triển ứng dụng là đảm bảo kích thước hình ảnh được khóa và sau khi hình ảnh được tải đầy đủ, chúng không thay đổi kích thước và ảnh hưởng đến bất kỳ kích thước phần tử nào khác. Nói một cách đơn giản, để đảm bảo lỗi kết xuất không được đưa vào, điều quan trọng là các yếu tố bên trong một mục ảo không thay đổi động.
Đối với virtual scrolling, các hiệu ứng tự nhiên của <img> nó không phải là các tính năng mong muốn. Chúng tôi khuyên bạn nên sử dụng <ion-img> thành phần thay <img> vì phần tử gốc vì khi một phần tử <img> được thêm vào DOM, nó sẽ ngay lập tức đưa ra yêu cầu HTTP cho tệp hình ảnh. Ngoài ra, <img> hiển thị bất cứ khi nào nó muốn, có thể là trong khi người dùng đang cuộn. Tuy nhiên, <ion-img> nó bị chi phối bởi việc chứa ion-content và không hiển thị hình ảnh trong khi cuộn nhanh.
Virtual Scroll Performance Tips(mẹo về thanh cuộn ảo)
IOS cordova WKWebView
Khi triển khai sang iOS với Cordova, chúng tôi khuyên bạn nên sử dụng plugin WKWebView để tận dụng chế độ xem web có hiệu suất cao hơn của iOS. Ngoài ra, WKWebView vượt trội hơn trong việc cuộn hiệu quả so với UIWebView cũ hơn.
lock in element dimensions and localtion(khóa vị trí và kích thước của phần tử)
Để virtual scroll có thể định kích thước và định vị mọi mục một cách hiệu quả, điều rất quan trọng là mọi phần tử trong mỗi virtual item không tự động thay đổi kích thước hoặc vị trí của nó. Cách tốt nhất để đảm bảo kích thước và vị trí không thay đổi, virtual item đã khóa kích thước của nó thông qua CSS.
use ion-img for images
Khi bao gồm hình ảnh trong Virtual Scroll, hãy đảm bảo sử dụng ion-img chứ không phải là <img> phần tử HTML tiêu chuẩn . Với ion-img, hình ảnh được tải chậm nên chỉ những hình có thể xem được hiển thị và các yêu cầu HTTP được kiểm soát hiệu quả trong khi cuộn.
Set approximate Widths and Heights
Như đã đề cập ở trên, tất cả các phần tử nên khóa trong kích thước của chúng. Tuy nhiên, virtual scroll không nhận biết được các kích thước cho đến khi chúng được hiển thị. Đối với kết xuất ban đầu, virtual scroll vẫn cần đặt số lượng mục sẽ được tạo. Với các đầu vào thuộc tính "xấp xỉ", chẳng hạn như approxItemHeight, chúng tôi có thể cung cấp cho virtual scroll một kích thước gần đúng, do đó cho phép virtual scroll quyết định số lượng mục nên được tạo
Changing dataset shouls use
Danh tính của các phần tử trong trình lặp có thể thay đổi trong khi dữ liệu thì không. Điều này có thể xảy ra, ví dụ, nếu trình lặp được tạo từ RPC đến máy chủ và RPC đó được chạy lại. Ngay cả khi "dữ liệu" không thay đổi, phản hồi thứ hai sẽ tạo ra các đối tượng có nhận dạng khác nhau và Ionic sẽ phá bỏ toàn bộ DOM và xây dựng lại nó. Đây là một hoạt động tốn kém và nên tránh nếu có thể.
Efficient header and footer functions
Mỗi virtual item phải luôn cực kỳ hiệu quả, nhưng một cách để thực sự giết chết hiệu suất của nó là thực hiện bất kỳ hoạt động DOM nào trong các chức năng đầu trang và chân trang của phần. Các hàm này được gọi cho mọi bản ghi trong tập dữ liệu, vì vậy hãy đảm bảo rằng chúng hoạt động hiệu quả..
React
Thành phần Virtual Scroll không được hỗ trợ trong React.
Vue
ion-virtual-scroll không được hỗ trợ trong Vue. Chúng tôi có kế hoạch tích hợp với các giải pháp hiện có do cộng đồng hướng tới cho cuộn ảo trong tương lai gần
Usage
<ion-content>
<ion-virtual-scroll [items]="items" approxItemHeight="320px">
<ion-card *virtualItem="let item; let itemBounds = bounds;">
<div>
<ion-img [src]="item.imgSrc" [height]="item.imgHeight" [alt]="item.name"></ion-img>
</div>
<ion-card-header>
<ion-card-title>{{ item.name }}</ion-card-title>
</ion-card-header>
<ion-card-content>{{ item.content }}</ion-card-content>
</ion-card>
</ion-virtual-scroll>
</ion-content>export class VirtualScrollPageComponent {
items: any[] = [];
constructor() {
for (let i = 0; i < 1000; i++) {
this.items.push({
name: i + ' - ' + images[rotateImg],
imgSrc: getImgSrc(),
avatarSrc: getImgSrc(),
imgHeight: Math.floor(Math.random() * 50 + 150),
content: lorem.substring(0, Math.random() * (lorem.length - 100) + 100)
});
rotateImg++;
if (rotateImg === images.length) {
rotateImg = 0;
}
}
}
}
const lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
const images = [
'bandit',
'batmobile',
'blues-brothers',
'bueller',
'delorean',
'eleanor',
'general-lee',
'ghostbusters',
'knight-rider',
'mirth-mobile'
];
function getImgSrc() {
const src = 'https://dummyimage.com/600x400/${Math.round( Math.random() * 99999)}/fff.png';
rotateImg++;
if (rotateImg === images.length) {
rotateImg = 0;
}
return src;
}
let rotateImg = 0;Basic
Mảng bản ghi phải được chuyển đến thuộc itemstính trên ion-virtual-scrollphần tử. Dữ liệu được cung cấp cho thuộc itemstính phải là một mảng. Một mẫu mục với thuộc *virtualItemtính được yêu cầu trong ion-virtual-scroll. Các *virtualItembất động sản có thể được thêm vào bất kỳ yếu tố.
Section Headers and Footert
Section headers and footers của phần là tùy chọn. Chúng có thể được tạo động từ các chức năng do nhà phát triển xác định. Ví dụ, một danh sách lớn các số liên lạc thường có vạch chia cho mỗi chữ cái trong bảng chữ cái. Các nhà phát triển cung cấp chức năng tùy chỉnh của riêng họ để được gọi trên mỗi bản ghi. Logic trong hàm tùy chỉnh sẽ xác định xem có nên tạo mẫu phần hay không và dữ liệu nào cần cung cấp cho mẫu. Hàm tùy chỉnh sẽ trả về nullnếu không nên tạo mẫu.
Dưới đây là ví dụ về một hàm tùy chỉnh được gọi trên mọi bản ghi. Nó được chuyển qua từng bản ghi, số chỉ mục của bản ghi và toàn bộ mảng bản ghi. Trong ví dụ này, sau mỗi 20 bản ghi, một tiêu đề sẽ được chèn vào. Vì vậy, giữa các bản ghi thứ 19 và 20, giữa bản ghi thứ 39 và thứ 40, v.v., a <ion-item-divider>sẽ được tạo và dữ liệu của mẫu sẽ đến từ dữ liệu trả về của hàm.
Custom Components
Nếu một thành phần tùy chỉnh sẽ được sử dụng trong Virtual Scroll, tốt nhất nên bọc nó bằng một <div> để đảm bảo thành phần được hiển thị chính xác. Vì việc triển khai và bên trong của mỗi thành phần tùy chỉnh có thể khá khác nhau, nên việc bao bọc bên trong <div> là một cách an toàn để đảm bảo các thứ nguyên được đo chính xác.
Properties
approxFooterHeight | |
|---|---|
| Description | Chiều rộng gần đúng của mỗi ô của mẫu chân trang. Thứ nguyên này được sử dụng để giúp xác định số lượng ô sẽ được tạo khi khởi tạo và giúp tính toán chiều cao của vùng có thể cuộn. Giá trị chiều cao này chỉ có thể sử dụng |
| Attribute | approx-footer-height |
| Type | number |
| Default | 30 |
approxHeaderHeight | |
| Description | Chiều cao gần đúng của mỗi ô của mẫu tiêu đề. Thứ nguyên này được sử dụng để giúp xác định số lượng ô sẽ được tạo khi khởi tạo và giúp tính toán chiều cao của vùng có thể cuộn. Giá trị chiều cao này chỉ có thể sử dụng |
| Attribute | approx-header-height |
| Type | number |
| Default | 30 |
approxItemHeight | |
| Description | Điều quan trọng là phải cung cấp thông tin này nếu chiều cao mục ảo sẽ lớn hơn đáng kể so với mặc định Chiều cao gần đúng của mỗi ô của mẫu mục ảo. Thứ nguyên này được sử dụng để giúp xác định số lượng ô sẽ được tạo khi khởi tạo và giúp tính toán chiều cao của vùng có thể cuộn. Giá trị chiều cao này chỉ có thể sử dụng |
| Attribute | approx-item-height |
| Type | number |
| Default | 45 |
footerFn | |
| Description | Chân trang của phần và dữ liệu được sử dụng trong khuôn mẫu đã cho của nó có thể được tạo động bằng cách chuyển một hàm tới |
| Type | ((item: any, index: number, items: any[]) => string | null | undefined) | undefined |
footerHeight | |
| Description | Một chức năng tùy chọn ánh xạ từng chân trang mục trong chiều cao của chúng. |
| Type | ((item: any, index: number) => number) | undefined |
headerFn | |
| Description | Tiêu đề phần và dữ liệu được sử dụng trong khuôn mẫu đã cho của nó có thể được tạo động bằng cách chuyển một hàm tới |
| Type | ((item: any, index: number, items: any[]) => string | null | undefined) | undefined |
headerHeight | |
| Description | Một chức năng tùy chọn ánh xạ từng tiêu đề mục trong chiều cao của chúng. |
| Type | ((item: any, index: number) => number) | undefined |
itemHeight | |
| Description | Một chức năng tùy chọn ánh xạ từng mục trong chiều cao của chúng. Khi chức năng này được cung cấp, các tối ưu hóa nặng và đường dẫn nhanh có thể được thực hiện bằng cách Chức năng này cho phép bỏ qua tất cả các lần đọc DOM, có thể làm như vậy dẫn đến hiệu suất lớn |
| Type | ((item: any, index: number) => number) | undefined |
items | |
| Description | Dữ liệu tạo các mẫu trong cuộn ảo. Điều quan trọng cần lưu ý là khi dữ liệu này đã thay đổi, thì toàn bộ cuộn ảo sẽ được đặt lại, đây là một thao tác tốn kém và nên tránh nếu có thể. |
| Type | any[] | undefined |
nodeRender | |
| Description | NOTE: only Vanilla JS API. |
| Type | ((el: HTMLElement | null, cell: Cell, domIndex: number) => HTMLElement) | undefined |
renderFooter | |
| Description | LƯU Ý: chỉ API JSX cho stencil. Cung cấp chức năng kết xuất cho chân trang được kết xuất. Trả về một dom ảo JSX. |
| Type | ((item: any, index: number) => any) | undefined |
renderHeader | |
| Description | LƯU Ý: chỉ API JSX cho stencil. Cung cấp chức năng kết xuất cho tiêu đề được kết xuất. Trả về một dom ảo JSX. |
| Type | ((item: any, index: number) => any) | undefined |
renderItem | |
| Description | LƯU Ý: chỉ API JSX cho stencil. Cung cấp chức năng kết xuất cho các mục được kết xuất. Trả về một dom ảo JSX. |
| Type | ((item: any, index: number) => any) | undefined |
Menthods
checkEnd | |
|---|---|
| Description | Phương thức này đánh dấu phần đuôi của mảng các mục là bẩn, vì vậy chúng có thể được hiển thị lại. Nó tương đương với việc gọi: CopyCopied |
| Signature | checkEnd() => Promise<void> |
checkRange | |
| Description | Phương pháp này đánh dấu một tập hợp con các mục là bẩn, vì vậy chúng có thể được hiển thị lại. Các mục phải được đánh dấu là bẩn bất kỳ khi nào nội dung hoặc kiểu dáng của chúng thay đổi. Tập hợp con của các mục cần cập nhật có thể được xác định bằng một độ lệch và độ dài. |
| Signature | checkRange(offset: number, len?: number) => Promise<void> |
positionForItem | |
| Description | Trả về vị trí của mục ảo tại chỉ mục đã cho. |
| Signature | positionForItem(index: number) => Promise<number>
|
.jpg)
.jpg)
0 Nhận xét