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.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
JavaScript中创建字典对象(dictionary)实例
Mar 31 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
JavaScript严格模式下关于this的几种指向详解
Jul 12 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 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开发GUI
2006/10/09 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
php生成微信红包数组的方法
2019/09/05 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
从vue源码看props的用法
2019/01/09 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
python类型强制转换long to int的代码
2013/02/10 Python
python的绘图工具matplotlib使用实例
2014/07/03 Python
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
Swift中的协议(protocol)学习教程
2016/07/08 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
python 怎样进行内存管理
2020/11/10 Python
番木瓜健康和保健产品第一大制造商:Herbal Papaya
2017/04/25 全球购物
全球最大的游戏市场:G2A
2018/07/05 全球购物
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
应用心理学个人求职信范文
2013/12/11 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
公司介绍信范文
2015/01/31 职场文书
python 爬取吉首大学网站成绩单
2021/06/02 Python