目录

Developing an Immersive Page

Implementation

The immersive page of an atomic service is divided into three parts:

The immersive experience is achieved by extending an atomic service page to the status bar and navigation bar while maintaining their full functionality and preventing conflicts with the page content. Specifically, an area that allows for in-app operations is defined as a safe area, and the status bar and the navigation bar are configured to avoid the safe area.

Global Configuration

Before customizing the status bar and navigation bar, change the value of navigationStyle in the app.json file to custom.

{
  "pages": ["page/index/index"],
  "window": {
    "navigationStyle": "custom",
  }
}

Safe Area Avoidance

The TabBar component automatically avoids the navigation bar at the bottom.

[h2]Solution 1: Using Custom Styles of the Status Bar and Navigation Bar

  1. Obtain the height of the status bar and navigation bar through APIs.

    You can call has.getSystemInfoSync() or has.getSystemInfo() to obtain the height of the status bar at the top (statusBarHeight) and the height of the navigation bar at the bottom (indicatorHeight) for calculating the safe area. The following uses has.getSystemInfoSync() as an example.

    try {
    let res = has.getSystemInfoSync();
    // Obtain the heights of the status bar and navigation bar.
    console.info(`getSystemInfoSync res.indicatorHeight: ${res.indicatorHeight}, res.statusBarHeight: ${res.statusBarHeight}`);
} catch (err) {
    console.error(`getSystemInfoSync fail, err:${err}`);
}
  2. Customize styles for avoidance.

    Customize the styles of the status bar and navigation bar. Use the statusBarHeight value obtained in step 1 as the height of the status bar and the indicatorHeight value as the height of the navigation bar to implement immersive adaptation.

[h2]Solution 2: Using the env() Function

You can use the env() function for adaptation with the following four predefined variables:

.css_body {
   padding-bottom: env(safe-area-inset-bottom);
   padding-top: env(safe-area-inset-top);
}