vue解决弹出蒙层滑动穿透问题的方法
最近开发过程中遇到一些小问题(似乎问题总是那么多),但一直没什么时间去优化与解决。程序员不能被业务绑架,有时间还是花点在代码上😀,开始这次的vue尝试吧。
【遇到的问题】
在一个可滑动列表页弹出一个全屏蒙层,蒙层固定,中间一块显示消息框,当用手滑动蒙层空白处时,滑动事件会穿透到底部列表页,导致列表页的滑动。
【要实现的目标】
1. 滑动蒙层空白处不让滑动事件穿透。
2. 当蒙层消息框文字多时,要让文字可上下滑动。
要实现的效果其实如下:
【实现思路】
1. vue提供的@touchmove.prevent可以用来阻止滑动,但是这个方法会对其内的子div的滑动事件也禁止掉了,这样会导致中间文字无法滑动。如果没有中间滑动需求,用@touchmove.prevent实现是一个很好的方法。
2. 蒙层设为fixed悬浮在最上,底部列表设置overflow-y: hidden;这样可以列表内容就不可以滑了,但实际过程中没有效果,于是想到继续往列表父div向上追溯,对body和html标签设置相关样式,这样就控制住了底部列表滑动问题。
3. 蒙层空白处点击事件与中间文字点击事件处理,防止事件冒泡带来其他bug。
【相关实现代码】
1. html代码都是比较简单,列表页for循环实现;蒙层用一个变量控制其显示和隐藏。但这里有几个注意点: a. 给上面列表的div动态绑定了noScroll class,它的作用是当消息蒙层显示时切换到相关的css样式; b. 弹出的全屏蒙层,加有点击事件是为了点空白处让蒙层消失,但这里对显示的每行文字还加了@click.stop="messageTitleClick(num)"这个方法,为什么加它呢——是因为蒙层空白处的点击方法对整个蒙层都生效,在文字上加上这个方法可以屏蔽掉蒙层点击方法的影响,即使这个方法里什么也不做它也是有作用的,另外这个方法上加了stop是为了防止它的点击事件穿透到后面的div。代码如下:
<!-- 列表 --> <div :class="{noScroll: isShowPopup}"> <div class="item" v-for="num in 50" @click="itemClick(num)"> <div style="width:100%">点击item{{num}}</div> </div> </div> <!-- 蒙层 --> <div v-if="isShowPopup" class="popup" @click="popUpEmptyClick()"> <div class="message"> <p class="message-title" v-for="num in 30" @click.stop="messageTitleClick(num)"> 消息提示 {{num}} </p> </div> </div>
2. 给整个列表动态绑定的css如下
/* 当前蒙层显示时生效 */ .noScroll { overflow-y: hidden; }
3. 给列表整个div动态绑定.noScroll 后,底部列表照样可以滑动,所以考虑继续向上追溯。利用watch监听蒙层是否显示,当显示时,设置body相应样式;但蒙层消失时,body样式恢复。但是在vue里怎么操作body里,虽然vue是数据驱动的,不提倡直接操作Dom。但此刻我也是没什么好办法了,就直接操作Dom了。如下:
watch: { isShowPopup(newVal, oldVal) { if (newVal == true) { let cssStr = "overflow-y: hidden; height: 100%;"; document.getElementsByTagName('html')[0].style.cssText = cssStr; document.body.style.cssText = cssStr; } else { let cssStr = "overflow-y: auto; height: auto;"; document.getElementsByTagName('html')[0].style.cssText = cssStr; document.body.style.cssText = cssStr; } // 下面需要这两行代码,兼容不同浏览器 document.body.scrollTop = this.pageScrollYoffset; window.scroll(0, this.pageScrollYoffset); } }
【补充】
最好去查看完整的demo代码,因为后续代码对真机上一些滑动问题进行了修复补充,包括处理一些滚动条位置等。
【Demo地址】
手动将路由切到 /three 就是此页示例
https://github.com/LiJinShi/wechat_back_vue
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 【Go 语言社区】算法课程 第一季 第4节 100以内的素数
- Java案例-数组求余问题
- GO语言实现的端口扫描器分享
- Java案例-数组随机数
- Go语言图片处理和生成缩略图的方法
- Python3 怎么将Unicode转中文,以及GBK乱码ÖйúÉÙÊýÃñ×åÌØÉ«´åÕ¯
- 数据结构和算法——旋转打印链表
- C/C++——set的基本操作总结
- PHP基础——字符串的常用操作
- NLP之tfidf与textrank算法细节对比基于结巴分词
- 【Go 语言社区】算法课程 第一季 第4节-汉诺塔
- C/C++——map的基本操作总结
- Python生成词云图,TIIDF方法文本挖掘: 词频统计,词云图
- C/C++——vector的基本操作总结
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android 判断所有字段是否已经输入的实例
- Android 将网络的Url资源转换为Drawable资源方式
- Android实现动态改变shape.xml中图形的颜色
- 解决android.support.v4.content.FileProvide找不到的问题
- 为Android系统添加config.xml 新配置的设置
- 浅析Android录屏 MediaRecorder
- 实用的网站开发工具导航源码,可以提高工作效率
- Github服务端和客户端完成本地代码上传至Github教程
- 一软在手截图无忧:ShareX截图神器-短小精悍功能完备 自动化任务可截动图截视频
- 使用SurfaceView实现视频弹幕
- 01 CentOS 7.6 切换系统语言
- Android双重SurfaceView实现弹幕效果
- SurfaceView播放视频发送弹幕并实现滚动歌词
- RecyclerView实现流式标签单选多选功能
- Android中AlertDialog四种对话框的最科学编写用法(实例代码)