# 页面属性：页面分栏-多布局展示页面

来源快照：`result_data_new_260518.json`

- 来源 ID：`1965276701595096554`
- 模块：低代码平台e-builder
- 目录：专题学习 - 功能点专题 - 页面图表
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

********1.  场景说明********     

通常不同的业务场景下可能需要设置不同的页面布局，有些则需要左有两栏，也有些可能需要上下展示等。如下左右边栏布局。    

效果展示如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157708271475884046&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

********  
********

********2.  功能简介************************

上述场景可以通过页面分栏功能实现，页面可选左边栏、右边栏、左中右、上边栏、下边栏，上中下布局。同时可以在样式面板设置布局的行列间距，当启用页面分栏功能时，还支持分栏滚动以及用户收缩等功能。

  


********3\. 操作说明********

1\. 点击页面设计器面板的空白处，选择布局，布局支持左右边栏，上下边栏 等布局可以选择。 ![](https://weapp.eteams.cn/papi/file/preview?fileId=1157708271448776737&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


2\. 在样式面板可以设置页面的行列间距。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157708275754958875&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


3\. 可以设置分栏滚动，分栏滚动开启之后就可以实现页面分栏的滚动；可以各个分栏的列数。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157708275754958892&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


4.  切换到右边栏，开启允许用户收缩，选择收缩方式，前端用户就可以进行展开或者收缩。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157708280030322697&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

5、开启页面分栏功能，可以设置链接在当前布局展开，如下树形组件。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157708284361670657&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

节点设置中，编辑动作中打开方式选择当前布局，然后选择展开区域，具体设置如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157708284543393811&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)
