【新版编辑器】悬浮窗

zhichi_admin

观看此功能视频教程请点击：http://school.jisuapp.cn/courses/151-20.html

---

一、悬浮窗的定义

悬浮窗：在小程序界面悬挂在右侧，可以快速直接进入到软件功能的快捷键，称为悬浮窗。对悬浮窗可以设置相关点击事件。

类型：固定悬浮窗、收缩悬浮窗

注：初次使用固定悬浮窗设置宽高属性之后，需要重新打包后才生效；web端只允许查看样式，功能请到开发者工具上查看

二、悬浮窗使用流程

1.添加悬浮窗

进入【编辑页面】-【组件库】-【布局】-【悬浮窗】

选择空白（如固定悬浮窗，收缩悬浮窗）/系统模板，添加到编辑器

2.固定悬浮窗的使用

（1）添加固定悬浮窗到编辑器

（2）支持更换模板

（3）默认新增4个悬浮窗，可以自主新增，最多允许新增5个悬浮窗

（4）可以对每个悬浮窗设置跳转点击事件，支持修改

（5）可根据需要显示是否显示图标或只显示文字

（6）组件样式，切换至组件样式，可以对悬浮窗设置样式，设置完之后，点击【预览】，可以到web端进行预览，查看效果

3.收缩悬浮窗的使用

（1）添加收缩悬浮窗到编辑器

（2）支持更换模板

（3）组件类型设置解释如下：

上下结构：是指图标和文字上下排版

左右结构：是指图标和文字左右排版

每行个数：设置每行悬浮窗设置个数

注：编辑器点击展开按钮可以查看收缩效果

（4）模板管理：支持增删改悬浮窗数量

（5）悬浮窗图标设置，展开按钮和收缩按钮的解释如下图表示：

收起悬浮窗的位置可以调整，分别可以在背景图里面和背景图外面，具体样式可查看下图：

（6）组件样式设置

4.收藏悬浮窗

点击【收藏为悬浮窗】，输入模板名称、模板图片、权重（可以改变模板位置）、模板分类，点击【确定】，就将模板进行收藏了

5.模板管理

点击【悬浮窗】/【更换模板】，切换至“我的模板”，支持对自己新增的模板进行管理，其操作和其他模板管理是一样的，此不详细述说

观看此功能视频教程请点击：http://school.jisuapp.cn/courses/151-20.html

yqff

感谢楼主分享

15593812268

学习中，多出视频教程

让他去

王企鹅请问额

网站建设1525270660

可以自定义加一个：添加桌面图标功能就好了