最近做一个小程序 实现页面内悬浮窗的效果

给自己制定两个方案:

1、通过一个自定义的组件,通过触摸事件进行实现;

2、使用微信的movable移动组件实现;

第一种方案:

结果:实现了 悬浮窗和自动靠齐一方的效果

  问题:IOS上的触摸事件支持的还可以,移动起来不是特别卡顿;但是安卓就不行了,卡顿严重;延迟特别明显;

注意:第一种方案要求配置高的机型 所以不适合现在的要求;

第二种方案:

结果:同样实现了悬浮窗和自动靠齐一方的效果

  问题:movable需要制定宽和高,来规定子元素的移动区域;但是等于覆盖了原有的页面,点击和一切对底部页面操作都无效;

注意:第二种方案可以实现很流畅的滑动效果,但是页面内覆盖了原有的层级,无法操作覆盖的页面;

最终,结合第二种方案的问题,想到了使用组件的方式来实现滑动和悬浮窗的效果,避免层级问题;

地址:https://github.com/Uhanxu/movable-area

由于时间有限,大家可以根据具体情况进行movable组件的逻辑优化,谢谢!

小程序 movable-area 实现悬浮窗效果的更多相关文章

  1. Android桌面悬浮窗效果实现,仿360手机卫士悬浮窗效果

    大家好,今天给大家带来一个仿360手机卫士悬浮窗效果的教程,在开始之前请允许我说几句不相干的废话. 不知不觉我发现自己接触Android已有近三个年头了,期间各种的成长少不了各位高手的帮助,总是有很多 ...

  2. 简易的可拖动的桌面悬浮窗效果Demo

    首先,我们需要知道,悬浮窗分为两种:Activity级别的悬浮窗,系统级别的悬浮窗 Activity级别的悬浮窗跟随所属Activity的生命周期而变化,而系统级别的悬浮窗则可以脱离Activity而 ...

  3. C# WPF QQ新消息托盘悬浮窗效果实现

    原文:C# WPF QQ新消息托盘悬浮窗效果实现 今天在做一个项目的时候需要这么一个效果,但是网上找了一会发现并没有现成的给我参考(复制),但是呢,我千(到)辛(处)万(抄)苦(袭)想(复)破(制)头 ...

  4. Android仿360手机卫士悬浮窗效果

    请看下图:                         首先是一个小的悬浮窗显示的是当前使用了百分之多少的内存,点击一下小悬浮窗,就会弹出一个大的悬浮窗,可以一键加速.好,我们现在就来模拟实现一下 ...

  5. Android 桌面悬浮窗效果实现,仿360手机卫士悬浮窗效果

    首先是一个小的悬浮窗显示的是当前使用了百分之多少的内存,点击一下小悬浮窗,就会弹出一个大的悬浮窗,可以一键加速.好,我们现在就来模拟实现一下类似的效果. 先谈一下基本的实现原理,这种桌面悬浮窗的效果很 ...

  6. Android WindowManager实现悬浮窗效果 (一)——与当前Activity绑定

    最近有学生做毕业设计,想使用悬浮窗这种效果,其实很简单,我们可以通过系统服务WindowManager来实现此功能,本章我们来试验一下在当前Activity之上创建一个悬浮的view. 第一步:认识W ...

  7. Qt实现悬浮窗效果

    当鼠标移动到头像控件时,显示悬浮窗,当鼠标离开时,悬浮窗隐藏.   1.控件选择 悬浮窗可以从QDialog派生,并将窗口的属性设置为无边框 this->setWindowFlags(this- ...

  8. 微信小程序【获取验证码】倒计时效果

    最近开始接触微信小程序,会记录一些相关的小功能——例如这次是点击[获取验证码]按钮出现的倒计时效果. 原文: http://blog.csdn.net/Wu_shuxuan/article/detai ...

  9. 微信小程序实例:实现tabs选项卡效果

    最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已 ...

随机推荐

  1. hive的排序,分組练习

    hive的排序,分組练习 数据: 添加表和插入数据(数据在Linux本地中) create table if not exists tab1( IP string, SOURCE string, TY ...

  2. 学习PYTHON之路, DAY 10 进程、线程、协程篇

    线程 线程是应用程序中工作的最小单元.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同的任务. 直接调用 impo ...

  3. mysql 执行sql流程

    客户端发送sql 语句后的堆栈 #0 0x0000000100370565 in do_command(THD*) at percona-server-Percona-Server-5.6.37-82 ...

  4. Django的url控制器

    一 url配置 Django 1.11版本 URLConf官方文档 URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表.也就是ur ...

  5. sed 命令总结

    sed是Stream Editor的缩写,是操作.过滤.转换文本内容的强大工具,对文件实现增删改查 主要参数 -n 取消默认输出 -i 修改保存文件 内置命令字符 a,append追加 d,delet ...

  6. 正则表达式中的re.S

    正则表达式中,“.”的作用是匹配除“\n”以外的任何字符,也就是说,它是在一行中进行匹配.这里的“行”是以“\n”进行区分的.a字符串有每行的末尾有一个“\n”,不过它不可见. 如果不使用re.S参数 ...

  7. JDBC连接ORACLE的三种URL格式

    格式一: Oracle JDBC Thin using an SID jdbc:oracle:thin:@host:port:SID 例如: jdbc:oracle:thin:@localhost:1 ...

  8. linux目录说明

    /etc/passwd  用户信息文件 [root@web01 ~]# cat /etc/passwd root: x: : : root: /root: /bin/bash 可登录用户 bin: x ...

  9. angular 定时函数

    注入$interval,$timeout   服务 2.定义函数 var aa = $interval(function(){ $timout(function(){ ..... }) },,定时时间 ...

  10. day-02

    昨天吧 需要写一个财务管理制度 很是伤脑 我发现一旦用脑过度 就会极其想吃零食 所以 昨天吃了些零食 说这个呢 无非是想说 我昨天学习python的时间很少 而且昨晚安装python软件也出现问题了 ...