> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 页面设置

> 页面介绍了如何使用自定义页面组件，包括设置入口、属性配置如启用页头和生命周期事件等。

| **能力** | **免费版** | **轻享版** | **专业版** | **专属版** |
| ------ | ------- | ------- | ------- | ------- |
| 自定义页面  | 不支持     | 不支持     | 支持      | 支持      |

## 1. 概念说明

页面组件会被默认放在设计器中，是宜搭页面的根组件，页面中所有的组件都会放在页面组件中

同一个页面只会存在一个页面组件，因此左侧的组件库中看不到页面组件，且页面组件也不可被复制或删除

## 2. 设置入口

### 2.1 点击顶部【页面设置】

在设计器顶部工具栏中，点击【页面设置】，会在设计器中选中页面组件，并在右侧展示页面组件的设置

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1640239347647-e4e186a6-853c-4071-8695-61ed9b2f55c1.png)
</Frame>

表单编辑页面

### 2.2 在大纲树中选中【页面】

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1640239380732-d080a9be-f370-4cde-bbdf-ff9855bed2c2.png)
</Frame>

### 2.3 通过右侧设置中的属性里选中【页面】

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1640239511090-6ac0d79c-554d-4919-a678-25724dfe7ef4.png)
</Frame>

## 3. 属性

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1640239537805-338d43e0-54b0-4454-ba6a-960f158a3d32.png)
</Frame>

属性设置

### 3.1 启用页头

页头启用后，会在页面顶部展示固定的页头区域，并支持在该区域预置的插槽中添加其他组件。

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1640239615070-50b6b899-f088-47e8-abbc-858a0e70af73.png)
</Frame>

点击设计器中的页头选中页头组件进行设置，也可以通过左侧大纲树、或右侧面包屑选中页头组件。

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1640239649381-28b54f9c-240f-4ad4-8dab-dee78197c7ae.png)
</Frame>

#### 3.1.1 页头属性

页头是一组插槽的集合，其中内置了多个插槽供用户自定义开启或关闭。

插槽开启后，对应插槽中可拖入组件或模板中，实现自定义的效果。

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1640239712960-2102d1af-482a-4440-ae0b-9ef85e1a75ee.png)
</Frame>

开启后的插槽默认填入了系统推荐的组件内容，可根据需要自行删除或新增组件。

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1640239752579-ff88098d-074f-4bb4-ac82-d8880f3336b9.png)
</Frame>

#### 3.1.2 页头样式

通用组件样式设置，可参考 [**样式介绍**](/zh/yida/form/gdnsgw)

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1640239762019-6fe487f0-e219-490a-b401-57c2cc5c73da.png)
</Frame>

### 3.2 生命周期

**路径**：自定义页面表单 >> 页面设置 >> 属性 >> 生命周期

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1640240404414-8c1b09c8-d33b-4d48-9d1d-e45dc017bf29.png)
</Frame>

#### 3.2.1 页面加载完成时

设置当页面加载完成时的动作，一般用于执行自定义的初始化逻辑

**点击【绑定动作】**

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1612073060941-4e06f8aa-1260-4d0e-bcbe-4fb96d826731.png)
</Frame>

**设置动作名称，点击【确定】完成动作创建。**

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1612073260757-cf6acf77-4119-44ad-a577-4464aaedd3b0.png)
</Frame>

**在【动作面板】中编写对应的业务逻辑**

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1612073347370-69161e26-8faa-4071-a5b9-dac40068f719.png)
</Frame>

业务逻辑如何编写请参考 [JS 动作面板 - 前端代码开放](/zh/yida/developer-features/ocmxyv)

绑定完成后点击右侧图标可【定位到代码】、【编辑】代码或者【删除】动作绑定

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1612073445219-0f7971b8-0162-4bf7-8c9a-557798dde76a.png)
</Frame>

#### 3.2.2 页面关闭时

设置页面关闭时的触发动作，操作步骤可参考上述【页面加载完成时】。

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1612074439263-c90d7341-949a-45f3-9fdb-c7583f1f9d55.png)
</Frame>

### 3.3 页面内容设置

#### 3.3.1 PC 端设置和 Mobile 端设置

设置 PC 端的外间距、内间距和背景色

设置移动端的外间距、内间距和背景色

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1612072982430-1b6a2d39-9cf2-48bc-a10c-2aaa01daa738.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1612072904962-61150b38-71d1-4ffc-9624-b6d348cc3bc8.png)
</Frame>

## 4. 样式

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1640240667813-0f6c6a59-f76d-42c3-b5ab-229e7e5bfb3a.png)
</Frame>

通用组件样式设置，可参考[**样式介绍**](/zh/yida/form/gdnsgw)