自定义页基本介绍

Roy

• 发表于：2021年10月08日 14:23 • 更新于：2021年10月08日 14:23

4270

概述

自定义页主要用于解决数据展示方式不理想的问题，自定义页不仅可以制作精美的前端效果，还可以实现一些基本的交互，如数据仪表盘、个性化数据列表展示及功能交互界面。复杂的交互可通过简单的编程实现。我们提供了一些页面模板，您可以选择一个模板快速排版一页面，也可以创建空白页自行组建。创建好的页面可以在菜单管理中进行绑定，绑定后即可通过左侧菜单打开自定义页。

下图显示了自定义页操作入口及编辑界面的组成：

页面设置

您可以对自定义页面进行一些设置来更方便地进行页面构建。下图展示了自定义页可设置内容。

网格

可设置使用的网格数。网格数按照显示屏幕的宽度进行等分，PC和移动端分开设置。一个格子由中间主体及其四周边界组成。

缩放

PC端由于市场上显示器大小各异，为此可切换不同宽度屏幕以检查适应性，最大支持1920（正常显示器），最小支持1000（笔记本等小屏）。还可自定义大小。

高度

按照屏幕高度等分出11格（默认），可继续增加高度，超出屏幕的高度（最高支持200格）以滚动条形式展示。

隐藏菜单顶部

使用白码搭建的系统在移动端均包含默认的顶部菜单，基于移动端个性化界面要求，可以选择隐藏默认顶部菜单，并通过固定定位（详情参考样式）组件构建个性化顶部菜单。

允许打印

自定义页面在PC端均支持导出PDF打印，开启后此页面左上角将出现一个“导出”按钮。

页面留白

页面顶部底部留白，适用于有顶部/底部固定的页面。

保存与预览

编辑页面后，请进行保存再点击预览，相关操作不会自动保存，如果未点击保存就离开编辑页面（包括点击“预览”按钮进行预览），操作将全部失效并恢复到上一次保存的状态。

PC和移动端切换

自定义页的PC和移动端分开独立，您必须分别设置页面内容。

组件库

白码平台目前提供了一些基础组件和图表组件供用户使用，根据需要展示的数据的数据类型选择合适的组件作为页面的图层展示，比如产品详情页的产品名称可使用文字组件来展示，产品的图片可用图片组件来显示。组件包括基础组件、容器组件、图表组件、输入组件、交互组件等，组件库将不断更新升级,您也可以通过js编程的方式编写属于自己的组件(暂未开放)。

页面属性

页面属性主要用于页面某些图层数据的动态筛选。

由于数据源（数据集）中设置的筛选是提前设置好的，是固定的筛选，但用在自定义页面的图层的数据的筛选有时候需要进行动态的筛选，比如“客户详情”的页面，该页面用于展示每个客户的详细内容，每次都不一样，所以数据集的固定的筛选无法满足需要，需要自定义页的页面属性功能来完成，只需在页面跳转时添加路由属性作为页面属性，图层的数据再通过页面属性进一步筛选到指定的数据。目前包含下面4种类型页面属性：

常量：即静态值。

变量：一种动态值，主要用于存储输入组件的输入值

路由参数：用于获取当前路由的参数值，其数值为路由的参数名。

组件属性：用于获取组件的属性值（通常为基础组件的属性）。