Page
Cú pháp
<zmp-page>
Mỗi component (*.vue) trong folder pages phải được bọc trong component Page.
Component Page hiển thị nội dung trang khi ứng dụng có nhiều routes và sử dụng router. Các route được đọc từ trường pages trong file app-config.json) hoặc khai báo trong prop routes của component App.
Page Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | Page name | |
| stacked | boolean | Bật cho trang hiện đang không active khi sử dụng stackedPages Router parameter sẽ giữ tất cả trang trên DOM | |
| page-content | boolean | true | Khi bật sẽ tự động thêm page-content element bên trong page element. Set bằng false khi sử dụng page-content elements cho tabs |
| tabs | boolean | Bật nếu sử dụng page giống như một Tabs wrapper | |
| no-swipeback | boolean | Tắt tính năng swipeback cho trang hiện tại (Trên IOS) | |
| with-subnavbar | boolean | Bật khi trang có sử dụng Sub Navbar | |
| no-navbar | boolean | Bật khi sử dụng chung Navbar layout và muốn ẩn Navbar chung (Hoặc sử dụng một Navbar khác) trên trang | |
| no-toolbar | boolean | Bật khi sử dụng chung Toolbar/Tabbar layout và muốn ẩn Navbar chung (Hoặc sử dụng một Toolbar/Tabbar khác) trên trang | |
| hide-bars-on-scroll | boolean | Ẩn Navbar & Toolbar khi cuộn trang | |
| hide-navbar-on-scroll | boolean | Ẩn Navbar khi cuộn trang | |
| hide-toolbar-on-scroll | boolean | Ẩn Toolbar khi cuộn trang | |
| ptr | boolean | Bật Pull To Refresh | |
| ptr-distance | number | Tùy chỉnh pull to refresh khoảng cách trigger. Mặc định là 44px. | |
| ptr-preloader | boolean | true | Tắt nếu muốn tắt preloader |
| ptr-bottom | boolean | false | Bật pull to refresh từ cuối trang |
| infinite | boolean | Bật Infinite Scroll | |
| infinite-top | boolean | Bật infinite scroll tại đầu trang | |
| infinite-distance | number | Khoảng cách từ cuối trang (tính theo px) sẽ trigger infinite scroll event. Mặc định là 50px | |
| infinite-preloader | boolean | true | Tắt nếu muốn tắt preloader |
Page Events
| Event | Prop | Description |
|---|---|---|
| @page:mounted | on-page-mounted | Event sẽ được triggered khi trang với keepAlive route được mounted/attached vào DOM |
| @page:init | on-page-init | Event sẽ được triggered sau khi Zalo Mini App khởi tạo các components được yêu cầu và navbar |
| @page:reinit | on-page-reinit | Event sẽ được triggered trong trường hợp chuyển đến trang đã được khởi tạo. |
| @page:beforein | on-page-before-in | Event sẽ được triggered khi tất cả mọi thứ đã được khởi tạo và trang sẵn sàng chuyển sang view |
| @page:afterin | on-page-after-in | Event sẽ được triggered sau khi trang được chuyển sang view |
| @page:beforeout | on-page-before-out | Event sẽ được triggered ngay trước khi trang sẽ chuyển ra khỏi view |
| @page:afterout | on-page-after-out | Event sẽ được triggered sau khi trang sẽ chuyển ra khỏi view |
| @page:beforeunmount | on-page-before-unmount | Event sẽ được triggered khi trang với keepAlive route được unmounted/detached khỏi DOM |
| @page:beforeremove | on-page-before-remove | Event sẽ được triggered ngay trước khi trang bị xóa khỏi DOM. Sử dụng khi detach các events / destroy các plugins giúp giải phóng vùng nhớ. Event sẽ không triggered trên keepAlive routes. |
| @page:tabshow | on-page-tab-show | Event sẽ được triggered khi component cha Tab View của trang xuất hiện |
| @page:tabhide | on-page-tab-hide | Event sẽ được triggered Khi component cha Tab View của trang ẩn đi |
| @ptr:pullstart | on-ptr-pull-start | Event sẽ được triggered when you start to move pull to refresh content |
| @ptr:pullmove | on-ptr-pull-move | Event sẽ được triggered trong khi người dùng kéo để tải lại nội dung |
| @ptr:pullend | on-ptr-pull-end | Event sẽ được triggered khi người dùng thả ra để tải lại nội dung |
| @ptr:refresh | on-ptr-refresh | Event sẽ được triggered khi pull to refresh chuyển sang trạng thái "refreshing" |
| @ptr:done | on-ptr-done | Event sẽ được triggered sau khi pull to refresh thực hiện xong và trở về trạng thái ban đầu |
| @infinite | on-infinite | Event sẽ được triggered khi trang đựợc cuộn tới vị trí đã được khai báo sẽ trigger event |
Page Slots
Component Page hỗ trợ các slots giúp tùy chỉnh component:
- default - element element sẽ được thêm dưới dạng child của "page-content" element khi page-content prop được bật (mặc định)
- fixed - element sẽ được chèn dưới dạng phần tử con trực tiếp của "page" ngay trước "page-content" element
Code demo fallback when rendering server side!
Ví dụ
Infinite Scroll
Code demo fallback when rendering server side!
Pull To Refresh
Code demo fallback when rendering server side!