Page

Page component hiển thị nội dung trang, khi app có định tuyến, chia ra nhiều routes, mỗi Page sẽ ứng với một route cụ thể, các route được khởi tạo mặc định trong App ( đọc từ trường pages trong file app-config.json) hoặc routes khai báo trong View

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
pageContent	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
noSwipeback	boolean		Tắt tính năng swipeback cho trang hiện tại (Trên IOS)
withSubnavbar	boolean		Bật khi trang có sử dụng Sub Navbar
noNavbar	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
noToolbar	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
hideBarsOnScroll	boolean		Ẩn Navbar & Toolbar khi cuộn trang
hideNavbarOnScroll	boolean		Ẩn Navbar khi cuộn trang
hideToolbarOnScroll	boolean		Ẩn Toolbar khi cuộn trang
ptr	boolean		Bật Pull To Refresh
ptrDistance	number		Tùy chỉnh pull to refresh khoảng cách trigger. Mặc định là 44px.
ptrPreloader	boolean	true	Tắt nếu muốn tắt preloader
ptrBottom	boolean	false	Bật pull to refresh từ cuối trang
infinite	boolean		Bật Infinite Scroll
infiniteTop	boolean		Bật infinite scroll tại đầu trang
infiniteDistance	number		Khoảng cách từ cuối trang (tính theo px) sẽ trigger infinite scroll event. Mặc định là 50px
infinitePreloader	boolean	true	Tắt nếu muốn tắt preloader

Page Events

Event	Prop	Description
pageMounted	onPageMounted	Event sẽ được triggered khi trang với keepAlive route được mounted/attached vào DOM
pageInit	onPageInit	Event sẽ được triggered sau khi Zalo Mini App khởi tạo các components được yêu cầu và navbar
pageReinit	onPageReinit	Event sẽ được triggered trong trường hợp chuyển đến trang đã được khởi tạo.
pageBeforeIn	onPageBeforeIn	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
pageAfterIn	onPageAfterIn	Event sẽ được triggered sau khi trang được chuyển sang view
pageBeforeOut	onPageBeforeOut	Event sẽ được triggered ngay trước khi trang sẽ chuyển ra khỏi view
pageAfterOut	onPageAfterOut	Event sẽ được triggered sau khi trang sẽ chuyển ra khỏi view
pageBeforeUnmount	onPageBeforeUnmount	Event sẽ được triggered khi trang với keepAlive route được unmounted/detached khỏi DOM
pageBeforeRemove	onPageBeforeRemove	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.
pageTabShow	onPageTabShow	Event sẽ được triggered khi component cha Tab View của trang xuất hiện
pageTabHide	onPageTabHide	Event sẽ được triggered Khi component cha Tab View của trang ẩn đi
ptrPullStart	onPtrPullStart	Event sẽ được triggered when you start to move pull to refresh content
ptrPullMove	onPtrPullMove	Event sẽ được triggered trong khi người dùng kéo để tải lại nội dung
ptrPullEnd	onPtrPullEnd	Event sẽ được triggered khi người dùng thả ra để tải lại nội dung
ptrRefresh	onPtrRefresh	Event sẽ được triggered khi pull to refresh chuyển sang trạng thái "refreshing"
ptrDone	onPtrDone	Event sẽ được triggered sau khi pull to refresh thực hiện xong và trở về trạng thái ban đầu
infinite	onInfinite	Event sẽ được triggered khi trang đựợc cuộn tới vị trí đã được khai báo sẽ trigger event

Page Slots

Page React 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

<Page>
  <div slot='fixed'>Fixed element</div>
  <p>Page content goes here</p>
</Page>;

{
  /* Render thành: */
}

<div className='page'>
  <div>Fixed element</div>
  <div className='page-content'>
    <p>Page content goes here</p>
  </div>
</div>;

Ví dụ

Infinite Scroll

Code demo fallback when rendering server side!

Pull To Refresh

Code demo fallback when rendering server side!