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

2024-02-09 05:30:44

在扯废话浪费大家的时间之前，先上个代码好了，使用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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

基于Vue实现tab栏切换内容不断实时刷新数据功能

先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax请求,防止阻塞,首次加载页面的时候又不能5个ajax同时请求,只需要请求第一个就好也没有必要建立5个区域,控制显示隐藏,浪费性能,业务代码就不贴了,把大概原理的代码贴上来先是用jq实现了一版 <!DOCTYPE html> <html lang="en"> &l
vue loadmore 组件滑动加载更多源码解析

上一篇讲到在项目中使用上拉加载更多组件,但是由于实际项目开发中由于需求变更或者说在webview中上拉加载有些机型在上拉时候会把webview也一起上拉导致上拉加载不灵敏等问题,我们有时候也会换成滑动到底部自动加载的功能. 既然都是加载更多,很多代码思想势必相似,主要区别在于上拉和滑动到底部这个操作上,所以,我们需要注意: 上拉加载是point指针touch触摸事件,现在因为是滑动加载,需要添加scroll事件去监听然后执行相应回调上拉加载主要计算触摸滚动距离,滑动加载主要计算containe
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件

按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是...在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊... 说说我的破解方法: 1.在每个需要用vue-router切换的组件的mounted钩子内将页面的位置自动回滚到页面顶部,解决滚动条位置自动记录问题: 2.在每个组件内定义一条变量scrollWatch默认为true,在绑定滚动监听事件时加个if判断,只有在scrollWatch
vue实现app页面切换动画效果实例

因为需要实现类似APP页面切换的动画效果,百度google搜索比较少资料,所以自己写文档,希望对您有用在router/index.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) Router.prototype.goBack = function () { this.isBack = true window.history.go(-1) } const router = new Router({
Vue.js组件tabs实现选项卡切换效果

今天给大家分享一个小颖自己写的vue组件,因为小颖也才接触vue没多久,如果有什么不足的地方,希望大家提出来,小颖加以改正.以下就是具体如何实现tabs啦. 调用示例: <template> <div class="tabs-contents">  <tabs :flag.sync='tabsShowFlag' :navtitle='navTitle' :navdata='navData'> <di
Vue.js组件tab实现选项卡切换

本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{padding: 0;margin:
基于Vue实现页面切换左右滑动效果

基于Vue的页面切换左右滑动效果,具体内容如下 HTML文本页面: <template> <div id="app> <transition :name="direction" mode="out-in">  <router-view class="app-view" wechat-title></router-vi
vue实现一个移动端屏蔽滑动的遮罩层实例

在扯废话浪费大家的时间之前,先上个代码好了,使用vue实现起来很简单-- <div class="overlayer" @touchmove.prevent > </div> 对,就是这么简单,加上@touchmove.prevent就可以屏蔽滑动页面了,然后再和普通的遮罩层一样,加点样式 /*遮罩层*/ .overlayer{ position:fixed; left:0; top:0; width:100%; height:100%; z-index:10;
写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab

前段时间写了一个移动端的自适应滑动Vue导航栏组件,觉得有一定实用性,大家可能会用得到(当然有些大佬自己写得更好的话就没必要啦),于是前两天整理了一下,目前已经发布到npm和GitHub上了,点我到npm,点我到GitHub项目 ,有需要的同学可以在项目中 npm install ly-tab -S 或者 yarn add ly-tab 使用,具体用法下面会讲到. 好了,先看看效果吧好的,开始废话了,实习差不多3个月了,这段时间跟着导师大佬也有接触过一些项目,也学到了不少东西,接触到的项目基本
vue实现一个懒加载的树状表格实例

目录一个懒加载的树状表格实例安装模板 js代码使用el-table懒加载树形表格时的注意点 1.版本问题 2.数据显示 3.滚动条 4.数据结构 5.el-table的fixed导致的问题一个懒加载的树状表格实例实现一个树状表格,需要用到vxe-table这个库,虽然element-ui也能实现,但这个库是专门针对表格做了更多的拓展,功能更多一些. 接下来,说一下使用方式. 安装 npm install xe-utils vxe-table // 入口文件引入,一般是main.js
使用vue制作探探滑动堆叠组件的实例代码

效果图如下所示: 前言嗨,说起探探想必各位程序汪都不陌生(毕竟妹子很多),能在上面丝滑的翻牌子,探探的的堆叠滑动组件起到了关键的作用,下面就来看看如何用vue写一个探探的堆叠组件一. 功能分析简单使用下探探会发现,堆叠滑动的功能很简单,用一张图概括就是: 简单归纳下里面包含的基本功能点: 图片的堆叠图片第一张的滑动条件成功后的滑出,条件失败后的回弹滑出后下一张图片堆叠到顶部体验优化根据触摸点的不同,滑动时首图有不同角度偏移偏移面积判定是否成功滑出二. 具体实现有了归纳好的功
Vue.js搭建移动端购物车界面

本文介绍了如何使用Vue搭建一个移动端购物车界面,最终实现的功能包括: 1. 选择要最终购买的物品 2. 选择每件物品购买的数量 3. 实时更新所选择物品的总价格 HTML部分首先给出HTML部分代码和注释,显示了整个界面的结构. <body> <div class="checkout"> <div id="app"> <div class="container"> <div class=
vue的一个分页组件的示例代码

分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能.具体如下: 文件page.vue为一个pc端的分页组件,基础的分页功能都有,基本的思路是,页面是用数据来展示的,那就直接操作相关数据来改变视图 Getting started import Page from './page.vue' 从目录引入该文件,在父组件注册使用复制代码代码如下: <page :total='total' :current-index="
Vue实现移动端左右滑动效果的方法

1. 最近得到一个新需求,需要在Vue项目的移动端页面上加上左右滑动效果,在网上查阅资料,最终锁定了vue-touch 2. 下载vue-touch (https://github.com/vuejs/vue-touch/tree/next) 注意:如果Vue是2.x 的版本的话,一定要下next分支上的. 3. 使用: 3.1 npm install vue-touch@next --save 3.2 在main.js 中引入: import VueTouch from 'vue-touch
vue中实现移动端的scroll滚动方法

一.首先安装安装 npm install better-scroll --save 二. 并在组件中引用 import BScroll from 'better-scroll' template中引用指向将要滚动的DOM元素根据官方文档ref属性的说明,我们可以这样将DOM元素引用三. 在methods中注册_initScroll方法,这个方法是对better-scroll的实例化,并且这个方法将来会在页面DOM结构渲染后被执行 methods: { _initScroll(){ this.
Vue + better-scroll 实现移动端字母索引导航功能

vue+ better-scroll 实现移动端歌手列表字母索引导航.算是一个学习笔记吧,写个笔记让自己了解的更加深入一点. Demo:list-view,使用 chrome 手机模式查看.换成手机模式之后,不能滑动的话,刷新一下就 OK 了. Github: 移动端字母索引导航效果图配置环境因为用到的是 vue-cli 和 better-scroll,所以首先要安装 vue-cli,然后再 npm 安装better-scroll. 简单介绍一下 better-scroll: better
vue2.0移动端滑动事件vue-touch的实例代码

Vue-touch的使用有时候我们不止需要有返回键,也要有手势滑动切换页面的功能时,这个时候vue-touch就派上用场了 API地址: https://github.com/vuejs/vue-touch/tree/next 安装 npm insall vue-touch@next --save //main.js中引入: import VueTouch from 'vue-touch' Vue.use(VueTouch, {name: 'v-touch'}) 用法如下: //html代码

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

相关推荐

随机推荐