自定义页面实现移动端底部导航栏

1. 使用场景

在移动端底部需要一个 TabBar 标签栏的情况。

新建自定义页面

拖入选项卡组件，将选项卡「形态」设为「包裹型」，「导航选项卡的位置」设为「下」

拖入选项卡

选中「选项卡」组件，在「样式」的「源码编辑」中添加如下代码

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

固定底部

在「选项卡」中拖入一个「容器」组件

拖入容器

选中「容器」组件，在「样式」的「源码编辑」中添加如下代码

width: 90vw;
height: 88vh;

设置宽高

此步骤只对选中的标签项内部添加容器组件，如有多个标签项，需要重复该步骤。

「选项卡」名称以及个数可如下图进行配置

编辑选项卡

可将需要的组件自定义放入「容器」中进行展示

编辑容器组件

本文档对您是否有帮助？

有用

没用