微信小程序开发|教程|文档|资源汇总_即速论坛

 找回密码
 立即注册

扫一扫,访问微社区

查看: 36001|回复: 4

【新版编辑器】悬浮窗

  [复制链接]

910

主题

2100

帖子

3万

金钱

管理员

论坛管理员

Rank: 9Rank: 9Rank: 9

积分
0

突出贡献优秀版主荣誉管理论坛元老

QQ
发表于 2017-5-3 12:09:28 | 显示全部楼层 |阅读模式
观看此功能视频教程请点击http://school.jisuapp.cn/courses/151-20.html


一、悬浮窗的定义

悬浮窗:在小程序界面悬挂在右侧,可以快速直接进入到软件功能的快捷键,称为悬浮窗。对悬浮窗可以设置相关点击事件。
类型:固定悬浮窗、收缩悬浮窗

图片1.png

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

二、悬浮窗使用流程

1.添加悬浮窗

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

图片2.png

选择空白(如固定悬浮窗,收缩悬浮窗)/系统模板,添加到编辑器

图片3.png

2.固定悬浮窗的使用

(1)添加固定悬浮窗到编辑器
(2)支持更换模板
(3)默认新增4个悬浮窗,可以自主新增,最多允许新增5个悬浮窗

图片4.png

(4)可以对每个悬浮窗设置跳转点击事件,支持修改

图片5.png

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

图片68.png

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

图片69.png

3.收缩悬浮窗的使用

(1)添加收缩悬浮窗到编辑器
(2)支持更换模板

图片7.png

(3)组件类型设置解释如下:
上下结构:是指图标和文字上下排版
左右结构:是指图标和文字左右排版
每行个数:设置每行悬浮窗设置个数
注:编辑器点击展开按钮可以查看收缩效果

图片8.png

(4)模板管理:支持增删改悬浮窗数量

图片9.png

(5)悬浮窗图标设置,展开按钮和收缩按钮的解释如下图表示:

图片10.png
图片11.png

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

图片12.png
图片13.png

(6)组件样式设置

图片14.png
图片15.png

4.收藏悬浮窗

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

图片16.png

5.模板管理

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

图片17.png

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



0

主题

7

帖子

287

金钱

新人求带

Rank: 1

积分
0
发表于 2017-10-20 15:28:19 | 显示全部楼层
感谢楼主分享

0

主题

6

帖子

282

金钱

新人求带

Rank: 1

积分
0
发表于 2018-1-1 22:32:59 | 显示全部楼层
学习中,多出视频教程

0

主题

1

帖子

17

金钱

新人求带

Rank: 1

积分
0
发表于 2018-1-5 14:00:48 | 显示全部楼层
王企鹅请问额

0

主题

1

帖子

14

金钱

新人求带

Rank: 1

积分
0
发表于 2018-5-2 22:19:29 | 显示全部楼层
可以自定义加一个:添加桌面图标功能就好了
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|小黑屋|微信小程序开发|教程|文档|资源汇总_即速论坛 ( 粤ICP备14097199号-1  

GMT+8, 2023-2-2 15:19 , Processed in 0.140319 second(s), 37 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表