vue实现移动端悬浮窗效果


Posted in Javascript onDecember 01, 2018

本文讲述,在使用VUE的移动端实现类似于iPhone的悬浮窗的效果。

相关知识点

touchstart 当在屏幕上按下手指时触发

touchmove 当在屏幕上移动手指时触发

touchend 当在屏幕上抬起手指时触发
mousedown mousemove mouseup对应的是PC端的事件

touchcancel 当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发touchcancel。一般会在touchcancel时暂停游戏、存档等操作。

效果图

vue实现移动端悬浮窗效果

实现步骤

1.html

总结了一下评论,好像发现大家都碰到了滑动的问题。就在这里提醒一下吧。可将该悬浮 DIV 同你的 scroller web 同级。 —- (log: 2018-08-21)

html结构: <template> <div>你的web页面</div> <div>悬浮DIV</div> </template>

<template>
 <div id="webId">
 ...
 <div>你的web页面</div>
 <!-- 如果碰到滑动问题,1.1 请检查这里是否属于同一点。 -->
 <!-- 悬浮的HTML -->
 <div v-if="!isShow" class="xuanfu" id="moveDiv"
  @mousedown="down" @touchstart="down"
  @mousemove="move" @touchmove="move"
  @mouseup="end" @touchend="end"
 >
  <div class="yuanqiu">
  {{pageInfo.totalPage}}
  </div>
 </div>
 ...
 </div>
</template>

2.JS

<script>
data() {
 return {
 flags: false,
 position: { x: 0, y: 0 },
 nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '',
 }
}

methods: {
 // 实现移动端拖拽
 down(){
 this.flags = true;
 var touch;
 if(event.touches){
  touch = event.touches[0];
 }else {
  touch = event;
 }
 this.position.x = touch.clientX;
 this.position.y = touch.clientY;
 this.dx = moveDiv.offsetLeft;
 this.dy = moveDiv.offsetTop;
 },
 move(){
 if(this.flags){
  var touch ;
  if(event.touches){
   touch = event.touches[0];
  }else {
   touch = event;
  }
  this.nx = touch.clientX - this.position.x;
  this.ny = touch.clientY - this.position.y;
  this.xPum = this.dx+this.nx;
  this.yPum = this.dy+this.ny;
  moveDiv.style.left = this.xPum+"px";
  moveDiv.style.top = this.yPum +"px";
  //阻止页面的滑动默认事件;如果碰到滑动问题,1.2 请注意是否获取到 touchmove
  document.addEventListener("touchmove",function(){
   event.preventDefault();
  },false);
 }
 },
//鼠标释放时候的函数
 end(){
 this.flags = false;
 },
}
</script>

3.CSS

<style>
 .xuanfu {
 height: 4.5rem;
 width: 4.5rem;
 /* 如果碰到滑动问题,1.3 请检查 z-index。z-index需比web大一级*/
 z-index: 999;
 position: fixed;
 top: 4.2rem;
 right: 3.2rem;
 border-radius: 0.8rem;
 background-color: rgba(0, 0, 0, 0.55);
 }
 .yuanqiu {
 height: 2.7rem;
 width: 2.7rem;
 border: 0.3rem solid rgba(140, 136, 136, 0.5);
 margin: 0.65rem auto;
 color: #000000;
 font-size: 1.6rem;
 line-height: 2.7rem;
 text-align: center;
 border-radius: 100%;
 background-color: #ffffff;
 }
</style>

实现好JS逻辑,基本上,问题不大。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的图片懒加载js
Jun 30 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
Jul 29 Javascript
web前端开发upload上传头像js示例代码
Oct 22 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
vue页面跳转实现页面缓存操作
Jul 22 Javascript
vue拖拽组件使用方法详解
Dec 01 #Javascript
vue实现div拖拽互换位置
Jul 29 #Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 #Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 #Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 #Javascript
Vue组件Draggable实现拖拽功能
Dec 01 #Javascript
BootStrap modal实现拖拽功能
Dec 01 #Javascript
You might like
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
JS更改select内option属性的方法
2015/10/14 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
js学习之----深入理解闭包
2016/11/21 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
js异步编程小技巧详解
2017/08/14 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
新东网科技Java笔试题
2012/07/13 面试题
生物制药自我鉴定
2014/01/25 职场文书
地球一小时倡议书
2014/04/15 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
优秀班组长事迹
2014/05/31 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server