Skip to main content

流式容器

容器采用 flex 布局，默认  宽度为画布的宽度，容器的高度默认由子元素撑开，也可以单独设置容器的宽高，使用此容器可以做出多端兼容的响应式页面

image.png

属性介绍​

背景图片绑定​

  • 支持绑定背景图片，如果背景图片来自接口可以点击 fx 进行绑定，注意：流式容器在没有子元素的时候是没有高度的，所以设置背景图想要看到效果，可以拖入其他组件占位。

image.png

循环渲染​

容器中的子组件需要循环展示的场景可以使用循环渲染。注意：循环渲染需要绑定页面数据源。

image.png

假设容器中的子组件为文本，点击 fx 进行绑定

image.png

然后选择循环数据-> 选中回显的字段即可

image.png

外观介绍​

布局​

相关设置项如下图：

image.png

开启滚动吸附 （只有容器在主面板下即根节点下才支持滚动吸附） image.png 如图可以看见页面滚动条已经不在页面顶部，我们设置滚动吸附的容器实现了吸顶的效果

image.png

显示​

  • 块级元素: 多个块级元素每个都会占据一整行
  • 行内区块: 多个行内区块元素会显示在同一行，容器可以设置宽高
  • 行内元素: 多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化
  • 弹性布局: 可以在水平、垂直方向实现各种组件的布局方式，实际使用场景最多。

image.png

自动撑满​

这里注意父容器为 flex 布局时才会生效

image.png

父级容器设置如下

image.png

x 轴滚动模式​

可以控制元素在 x 轴方向滚动条的显示。

y 轴滚动模式​

可以控制元素在 y 轴方向滚动条的显示。

容器介绍​

容器内外边距设置

左外边距​

image.png

上内边距​

image.png

背景介绍​

背景支持设置背景色、颜色渐变、背景图片等

背景色​

支持调整不透明度

image.png

渐变色​

可以调整渐变角度

image.png

背景图片​

设置背景图片的同时还可以设置背景图片下的背景色

image.png

不设置​

如果不需要设置任何背景可以点此项

image.png

边框​

边框设置默认全部边的边框，如果设置某条边的边框可以参考如下图设置

image.png

image.png

阴影​

设置元素的阴影，x：横向偏移 y：纵向偏移

image.png

自定义​

自定义 class， 支持 less 方式输入，优先编辑 less 代码，右侧会自动识别定义好的 less 代码，直接选择即可；当然也可以直接输入 class 名回车，再编辑 less。 自定义 less 为页面级别，多个页面相互隔离。

image.png

效果展示

image.png

事件​

点击事件​

容器目前只支持点击事件

image.png