有手就会！新媒体h5制作之模拟群聊插件

新媒体设计做模拟“群聊/朋友圈场景”的h5创意互动时，大量的图文排版和样式设计需要很大的工作量，需要很大耐心，快看这个演示视频！早下班，快人一步！！

5分钟可做一个模拟群聊效果，替换头像、昵称、文字和图片即可，支持触发行为跳转，动画时间也可以灵活设定！详细的看下面组件操作介绍～

1、内容调整

a）可调整群聊消息显示方向：

• 显示为左，即发送者，可以调整用户的头像和昵称；

• 显示为右，即接收者，默认调用微信头像和昵称。

b）可勾选是否显示日期，调整日期内容

2、消息类型

可选择文本、图片或视频三种类型的消息切换（更多的类型在规划迭代中）

1. 文本类型：可自定义输入文字内容，点击“@”可以赋值用户微信昵称、浏览量等参数变量；

2. 图片类型：可自定义1张图片；

3. 视频类型：可自定义1条视频内容，根据竖屏或横屏的尺寸显示。

3、增删与调序

1. 选中指定消息的时候，可以切换到该条消息的编辑状态；

2. 按住指定消息可以上下拖拽，调整消息的排序次序；

3. 点击消息列表上的“+”，可以设置消息的触发器；

4. 点击消息列表上的“x”，可以删除消息内容；

5. 点击“增加群聊项”，可以增加一条群聊内容。

二、全局配置

可配置群聊插件全局内容，包括群聊背景、头像、昵称、文本及颜色

1、群聊背景

可以调整全局聊天内容的文本颜色；

2、主题                              

可以配置全局样式主题；

3、边框及背景                            

可以调整全局左聊天底框、右聊天底框及背景色的色值；

4、动画设定

可以调整全局消息出现的动画间隔时间，默认为1秒，支持小数点后一位，如1.8秒；

5、音频

可以调整全局消息出现时的提示音频，需mp3格式；

6、触发器

可以调整全局触发器，包含开始播放时、结束播放时；

注意事项：

1. 群聊插件文本目前只支持中文居中，有英文或字母对齐方式会偏左；

Powered by Froala Editor