Customize the page to implement the navigation bar at the bottom of the mobile terminal

1. Usage scenarios

If a TabBar tab is required at the bottom of the mobile terminal.

2. Implementation steps

2.1 create a custom page

Create a custom page

2.2 configure tab components

Drag the tab component, set the tab shape to package type, and set the navigation tab position to bottom 」

Drag tab

2.3 set tab style

Select the "tab" component and add the following code to the "source code editing" of the "style".

:root {
position: absolute;
bottom: 0;
}
.next-tabs-nav {
  display: flex;
  justify-content: space-evenly;
}

Fixed bottom

2.4 drag into the container assembly and set the width and height

Drag a container component into the TAB

Drag into container

Select the container component and add the following code to the source code editor of the style.

width: 90vw;
height: 88vh;

Set width and height

This step only adds container components to the selected TAG items. If there are multiple tag items, repeat this step.

2.5 Configuration tab and components in the container

The name and number of tabs can be configured as shown in the following figure.

Edit tab

You can customize the required components into the container for display.

Edit container components

3. Effect display

此处为语雀视频卡片，点击链接查看：Record_2021-12-03-14-55-50_6483dd1576f1330fe7c408604fe48ee1.mp4

4. Try it online

https://www.aliwork.com/bench/coe? tplUuid=TPL_DCCZHVKSZD567BFPDPZQ