Upon page display, the page rendering information is returned through the page display callback API. The page rendering information contains the domPos and resourceIndex attributes. You can save the attributes to the database for reading progress navigation.
This function involves two APIs. See the following table for detailed API information.
| API | Description |
|---|---|
| on('pageShow') | Registers the notification service displayed on the page, which is triggered after the page layout is successfully displayed. |
| off('pageShow') | Deregisters a callback for the chapter content pagination result. This API can be called when a page is destroyed. |
Before listening to reading progress notifications, ensure that you have built a reader.
Listen to the page display callback through ReaderComponentController.
The typesetting engine calls the on('pageShow') API to return the page rendering information after rendering the page. The domPos and resourceIndex attributes in the page rendering information are used to identify the reading progress.
You can save the reading progress to the database through the on('pageShow') API callback in real time, preventing progress loss if a user exits the reader unexpectedly. When the user returns to reading, you can pass the saved domPos and resourceIndex attributes to the startPlay API to restore the reading progress.
// Save the page display callback reference for use when unregistering it.
private onPageShowCallback = (data: readerCore.PageDataInfo): void => {
// You can save the content pagination data here, and pass the **data.resourceIndex** and **data.startDomPos** values to the **startPlay** API to resume reading when required.
hilog.info(0x0000, 'ReaderLog', 'pageshow: data is: ' + JSON.stringify(data));
}
aboutToAppear(): void {
this.setOnPageShowListener();
}
private setOnPageShowListener(): void {
this.readerComponentController.on('pageShow', this.onPageShowCallback);
} When the page is destroyed, call the API to unregister the page display callback by passing the original callback function reference.
aboutToDisappear(): void {
this.readerComponentController.off('pageShow', this.onPageShowCallback);
}