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 相关文章推荐
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
JQuery标签页效果的两个实例讲解(4)
Sep 17 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
Vue中的异步组件函数实现代码
Jul 20 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
使用JavaScript获取Django模板指定键值数据
May 27 Javascript
js实现随机圆与矩形功能
Oct 29 Javascript
如何用threejs实现实时多边形折射
May 07 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
用libTemplate实现静态网页的生成
2006/10/09 PHP
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
ucenter通信原理分析
2015/01/09 PHP
ThinkPHP模型详解
2015/07/27 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
jquery提升性能最佳实践小结
2010/12/06 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
python 中random模块的常用方法总结
2017/07/08 Python
代码分析Python地图坐标转换
2018/02/08 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
"引用"与指针的区别是什么
2016/09/07 面试题
食品行业求职人的自我评价
2014/01/19 职场文书
师德师风个人反思
2014/04/28 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
王亚平太空授课观后感
2015/06/12 职场文书
卖车协议书范文
2016/03/23 职场文书
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript