Custom page enables navigation at the bottom of the mobile terminal

创建自定义页面 | 钉钉宜搭·帮助中心

能力免费版轻享版专业版专属版自定义页面不支持不支持支持支持未升级到新版信息架构的组织，请 点此查看 使用手册1. 操作步骤在应用管理界面，提供了两个创建自定义页面的入口1.1 通过【新建页面】下拉菜单创建左上角新建页面，在下拉菜单中选择【新建自定义页面(Beta)】，开始创建新建自定义页面1....

https://docs.aliwork.com/docs/yida_support/ui648w/ynk2lo

This case is from Jing, a three-party developer 」

1. Usage scenarios

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

2. Implement functions

2.1. Create a custom page

2.2. Configure custom pages

2.2.1. Page structure

2.2.2. Configure the main container style

Note enable [use unique identifier as DOM ID]].

:root {
  display: flex;
  flex-direction: column;
}

Copy the following code to the page to set the height of the main container to a full screen:

// 设置容器高度为一屏
export function setFullScreenHeight(contentId = '') {
  const headerDom = document.querySelectorAll('.next-shell-header');
  const contentDom = document.querySelector(`#${contentId}`);
  const headerDomHeight = headerDom.length ? headerDom[0].offsetHeight : 0;
  const contentDomHeightCssStr = `calc(100vh - ${headerDomHeight}px)`;
  contentDom.style.height = contentDomHeightCssStr;
}

To call didMount, change the function input parameter to the unique identifier of your main container:

export function didMount() {
  this.setFullScreenHeight('div_lbzvlmed');
}

2.2.3. Configure the content container style

:root {
  flex: 1;
  padding: 16px;
  overflow: auto;
}

2.2.4. Configure the bottom navigation container style

:root {
  display: flex;
  align-items: center;
  padding-top: 6px;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 6px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 6px);
  border-top: 1px solid #e5e6e8;
  background-color: #ffffff;
}

3. Effect

4. Try it online

示例中心 | 开发者赋能平台

AI智能体时代，全新宜搭。业务创新，一搭就行。

https://www.aliwork.com/o/coc?tplUuid=TPL_DCCZHVKSZD567BFPDPZQ&from=yuque_subject