组件

随着应用与用户数量的增长,我们在设计器中提供了丰富的组件类型,以满足更多个性化需求和培养良好的操作习惯。目前移动 PaaS 平台提供的组件包括“基础组件”、“高级组件”和“布局组件”等多类型组件。可以在设计器中自由使用来随心所欲的搭建您的应用。

标题组件

标题组件为基础组件之一,位于“组件”-“基础组件”下。适用场景较多,通常和其他多种组件如图集、列表组件等搭配使用。

可以在右侧“属性-内容”tab 下进行标题内容、字号及行高等文本属性的编辑。

Elemimg_head1

在“属性-样式”tab 下我们还提供了多种应用内常见的标题样式以供挑选,另外可以自定义标记颜色、设置组件位置等。

Elemimg_head2

按钮组件

按钮组件为基础组件之一,位于“组件”-“基础组件”下。可以单独使用,也可放在表单视图、容器布局或者如下图的列表视图中使用。

可以在右侧“属性-内容”tab 下进行按钮内容、字号及其他文本属性的编辑。

Elemimg_btn1

除了可以编辑样式外,还可以在“属性-事件”tab 下进行按钮“跳转页面”或者“开启功能”的事件绑定。“跳转页面”可以选择应用的页面或者自定义链接。

Elemimg_btn2

文本组件

文本组件为基础组件之一,位于“组件”-“基础组件”下。应用场景十分广泛,通常单独作为文本展示,也可放在容器布局组件中使用。

可以在右侧“属性-内容”tab 下进行文本内容、字号及其他属性的编辑。

Elemimg_text1

文本组件同样可以在“属性-样式”及“事件”tab 下分别进行相关样式的调整及页面跳转、开启功能的事件绑定。

Elemimg_text2

图片组件

图片组件主要适用于在应用中上传单个图片的场景。如产品单图介绍,布局图片等。

Elemimg_img1

图组组件

图组组件是多个图片的集合的组件,它可支持单行多图与多行多图,主要应用于快速浏览一组图片列表,然后跳转至不同界面。

Elemimg_imggroup1

菜单导航组件

菜单导航组件作为移动端应用最常用的组件之一,可以为应用的多数功能提供功能入口 。它支持宫格样式及列表样式等,可广泛使用于应用首页、个人中心等页面。

在右侧“属性-内容”tab 下可以添加足够数量的导航,上传自定义图标并绑定跳转页面。

Elemimg_menu1

在“属性-样式”tab 下可以根据使用场景选择合适的展示样式,调整导航的列数、尺寸等。

Elemimg_menu2

轮播 banner 组件

轮播组件也是移动端应用最常用的组件之一,最常见于应用首页头部,电商、交易类应用用轮播图吸引用户点击进入商品或者活动页面。

在右侧“属性-内容”tab 下可以添加足够数量的轮播,上传 banner 图片并绑定跳转页面。

Elemimg_banner1

在“属性-样式”tab 下可以设置间隔时间、标记点样式及位置等。

Elemimg_banner2

表单组件

表单组件在移动应用中主要用作数据采集,帮助快速制作表单,它的用途包括收集用户反馈、报名、预约服务等等。

首先需要在 PaaS 控制台添加业务对象,填写名称及来源 API。保存后便可以在设计器中绑定使用。

Elemimg_form1

在左侧组件区域“高级组件”中拖拽表单组件到预览区域,右侧“属性-内容”下绑定添加的业务对象即可,也可以作为列表详情页使用。

Elemimg_form2

在左侧组件区域“表单子组件”中拖拽需要的子组件到预览区域的表单组件中,右侧“属性-内容”下可以分别绑定各子组件的数据字段及编辑内容。

Elemimg_form3

单选框、开关等子组件还可以选择不同的展示样式。

Elemimg_form4

列表组件

列表组件常见于应电商、交易类应用的商品列表,通常包含图片、标题、数据等元素,用于展示一系列商品信息,点击可跳转商品详情页或者进行后续操作等。

首先需要在 PaaS 控制台添加业务对象,填写名称及来源 API。保存后便可以在设计器中绑定使用。

Elemimg_list1

在左侧组件区域“高级组件”中拖拽列表组件到预览区域,右侧“属性-内容”下绑定添加的业务对象即可。

Elemimg_list2

在左侧组件区域中拖拽需要的基础组件到预览区域的列表组件中,右侧“属性-内容”下可以分别绑定各组件的数据字段及编辑内容。

Elemimg_list3

基础组件的编辑方式和单独使用时基本一致。

Elemimg_list4