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 相关文章推荐
学习ExtJS(一) 之基础前提
Oct 07 Javascript
jQuery 入门级学习笔记及源码
Jan 22 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
做好七件事帮你提升jQuery的性能
Feb 06 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
JS截取字符串实例详解
Nov 24 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
微信小程序开发之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
PHP截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
2017/08/30 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
Python中operator模块的操作符使用示例总结
2016/06/28 Python
Python找出最小的K个数实例代码
2018/01/04 Python
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
预备党员入党思想汇报
2014/01/04 职场文书
会计岗位职责模板
2014/03/12 职场文书
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
班组长安全工作职责
2014/07/15 职场文书
2014年医院工作总结
2014/11/20 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
数据库连接池
2021/04/06 MySQL
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL