vue实现一个移动端屏蔽滑动的遮罩层实例


Posted in Javascript onJune 08, 2017

在扯废话浪费大家的时间之前,先上个代码好了,使用vue实现起来很简单……

<div class="overlayer" @touchmove.prevent >
  </div>

对,就是这么简单,加上@touchmove.prevent就可以屏蔽滑动页面了,然后再和普通的遮罩层一样,加点样式

/*遮罩层*/
.overlayer{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:10;
}

如此,便可以了_(:з)∠)_,vue真是好用啊……

以下是废话和原理

开发移动端页面的时候有一个很比较常见的需求,在出现弹窗时,禁止滑动弹窗后面的主体页面; 

实际上大部分弹窗插件(或者组件)都带了这样的功能,所以我自己也从来没研究过这个;

 这次的项目突然出现了一个需要自己写弹窗的场景……我瞬间就懵逼了QwQ

虽然毫无思路,但是代码还是要写的,效果还是要实现的,问题还是要解决的,而程序员解决问题的第一步,自然就是先去百度一下;

 一般来讲吧,普通问题都可以直接百度解决,百度不到的再考虑问人,屏蔽滑动的遮罩层这样常见的需求,自然是有一大堆的解决方案,不过……太多了根本没法选啊(??□′)?︵┻━┻

随便试了一套方案,未果,遂放弃了继续尝试的打算……还是去翻别人的源码吧。

 首先想到了mint ui中的popup组件;

认真阅读了一下,发现这个遮罩层也没做什么事情,就是屏蔽了一下touchmove事件,拿到这个思路再回去自己查了下资料,移动端的屏幕滑动,实际上就是touchmove事件的默认行为,在冒泡过程中任何一层阻止这个默认行为,都可以阻止屏幕滑动,弄懂原理,实现起来就简单了,传统做法是在body上添加一个touchmove事件处理器,在显示遮罩层的时候使用.preventDefault()方法阻止默认行为,而vue就更简单了,把弹窗之类的都写在遮罩层元素内部,然后直接在遮罩层上加上一个取消默认行为的事件处理器,就可以咯~

注意!

如果弹窗不在遮罩层内部,那么冒泡就不会经过遮罩层,也就无法屏蔽滑动了0.0

<div class="overlayer" @touchmove.prevent >
  </div>
  <div class="popup">
    如果在这个div中滑动,触发的事件是不会经过overlayer的,也就无法屏蔽滑动了
  </div>

如果实在不能把弹窗放到遮罩层内,那么给弹窗加一个单独的 .prevent 修饰符也可以,下面这两种方式都是有效的:

<!--plan A-->
  <div class="overlayer" @touchmove.prevent >
    <div class="popup">
      如果在这个div中滑动,触发的事件会经过overlayer,可以屏蔽滑动
    </div>
  </div>

  <!--plan B-->
  <div class="overlayer" @touchmove.prevent >
  </div>
  <div class="popup" @touchmove.prevent>
    如果在这个div中滑动,触发的事件也会被禁用默认行为, 也可以屏蔽滑动
  </div>

PC端方案

这种屏蔽方式只是屏蔽了滑动,对于PC端的鼠标滚轮是无效的,但屏蔽鼠标滚轮也很简单,把 touchmove 事件处理器改成 scroll 事件的处理器就好了~就像这样:

<div class="overlayer" @scroll.prevent >
  </div>

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

Javascript 相关文章推荐
javascript 函数调用规则
Aug 26 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
Apr 24 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
laydate时间日历插件使用方法详解
Nov 14 Javascript
vue项目中mock.js的使用及基本用法
May 22 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
微信小程序开发之map地图实现教程
Jun 08 #Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 #Javascript
微信小程序开发之实现自定义Toast弹框
Jun 08 #Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 #Javascript
javascript实现二叉树遍历的代码
Jun 08 #Javascript
微信小程序tabbar不显示解决办法
Jun 08 #Javascript
javascript实现二叉树的代码
Jun 08 #Javascript
You might like
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
iOS10推送通知开发教程
2016/09/19 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
jquery html添加元素/删除元素操作实例详解
2020/05/20 jQuery
JS实现鼠标移动拖尾
2020/12/27 Javascript
python对字典进行排序实例
2014/09/25 Python
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
python模块如何查看
2020/06/16 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
《九色鹿》教学反思
2014/02/27 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
企业文化标语口号
2014/06/09 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python