.

触发器-图片弹窗教程

小常发表于:2024年11月15日 15:19:44

一、应用场景

针对原有弹窗功能,我们进行了全面升级。现在弹窗能够同时展示图片和文字内容,这种图文结合的弹窗主要用于展示辅助信息。当元素进行互动时,选择触发行为相应的图文弹窗主题展示。


二、触发器用法

1、给画布上的元素添加触发行为,在触发器面板上选择图片弹窗,即可添加成功;

image (40).png


2、选择图片弹窗后,在画布上可以直观看到弹窗展示样式,右侧触发面板是对弹窗里面的元素进行修改(选择主题、更换图片、标题以及内容的调整);

image (41).png


3、目前弹窗的有三种主题样式可供选择,在主题下拉框进行确定;

image (42).png


3.1、图片弹窗样式1:是上图下文一个排列方式,可根据作品的整体色调来选择弹窗背景色,图片支持自己上传,也可上传之后更换,支持图片选择参数变量@,点击预览按钮即可预览当前上传的图片;

image (43).png


根据不同图片的尺寸大小,这边支持三种显示方式:缩放以适合、缩放已填充和撑满;

image (44).png


弹窗里的文本标题可根据作品设置,如若不需要标题删除标题文字即可;标题的最多可输入12个文字,需精化内容,可修改标题的字号大小和颜色,支持标题选择参数变量@;

image (45).png


弹窗高度会跟随文本内容的多少改变,初始高度即是选择时的高度;弹窗的最大高度是当前手机高度的80%,当文本内容过多时,内容可往下滑动;

image (46).png

image (47).png


弹窗的按钮支持个性化配置,按钮的颜色以及文字的颜色支持进行修改,可对“确认”“取消”按钮进行配置,如若不需要可取消该按钮,按钮文字字数最大支持4个字,超出4个字则不进行显示;

image (48).png


支持更换关闭按钮,可上传自定义图片,按钮位置可选择三个位置(弹窗下方、左上角、右上角)

image (49).png


支持对弹窗的元素触发,选择元素触发行为进行触发器设置(点击内容区域时是该弹窗的内容区域);

image (50).png


3.2、图片弹窗样式2:是上文下图一个排列方式,整体功能与样式1保持一致;

image (51).png


3.3、图片弹窗样式3:是纯图片的展示方式,没有文本内容编辑区域,可以上传自定义的图片(包括不规则图片),支持上传自定义图片按钮,根据作品需求,可取消该按钮,其他整体功能与样式1、2无异;

image (52).png