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 相关文章推荐
JavaScript RegExp方法获取地址栏参数(面向对象)
Mar 10 Javascript
JavaScript Date对象 日期获取函数
Dec 19 Javascript
ExtJs的Date格式字符代码
Dec 30 Javascript
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
JS动态修改iframe内嵌网页地址的方法
Apr 01 Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 Javascript
JavaScript 基础函数_深入剖析变量和作用域
May 18 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 Javascript
vue调用高德地图实例代码
Apr 28 Javascript
vue之数据交互实例代码
Jun 16 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
Dec 18 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发送邮件类代码附详细说明
2008/07/10 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
flash javascript之间的通讯方法小结
2008/12/20 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
vue实现登录功能
2020/12/31 Vue.js
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
python开发之for循环操作实例详解
2015/11/12 Python
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
python删除字符串中指定字符的方法
2018/08/13 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
Python-openCV开运算实例
2020/07/05 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
关于是否需要写商业计划书
2014/02/07 职场文书
《火烧云》教学反思
2014/04/12 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
校园新闻稿范文
2015/07/18 职场文书