DataV的移动端可视化界面与传统的PC端可视化界面有多个不同点,例如,可滚动的流式布局、相对低的性能消耗、按比例响应式的内容缩放、组件和数据的懒加载功能。本文档为您介绍移动端编辑器的基本概念,帮助您快速了解移动端编辑器的功能点。

概念定义

移动端编辑器中有三个元素概念需要区分,分别为容器格子组件
元素概念 说明
容器 容器是用于组织移动端内容,控制流式画布中内容布局的元素,目前移动端画布编辑中提供的容器有以下三种。(从左至右分别为:普通容器、多列容器、多行容器)三种布局容器
  • 普通容器:只提供一个可布局区域。
  • 多列容器:用于按列组织布局,会生成多个按列排布的布局区域(格子)。
  • 多行容器:用于按行组织布局,会生成多个按行排布的布局区域(格子)。
格子 格子区域用于支持拖入组件或者容器,如下图容器内部的灰色及蓝色实线框所示。三种布局容器
组件 可视化应用中内容的载体,与DataV传统的PC端画布编辑器的组件一样,是可视化应用用于进行视觉传达的元素。

单位使用

在移动端编辑器中将使用到两种单位:vw%
单位 说明
vw vw表示当前容器宽高相对于当前页面宽度的大小。例如,设置60的高度表示容器真实高度是页面宽度的60%,您在宽度像素为375px的手机上会渲染出225px高度的内容。该单位主要用于定义最外层容器的高度、容器和格子的内外边距等等。vw单位示例
% %表示当前宽高相对于父元素的大小。例如,某格子的布局占比为40%,则意味着它占父容器的宽或者高的40%,具体是宽度还是高度,取决于父容器的类型。该单位主要用于格子布局占比的程度。