在vue中实现禁止屏幕滚动,禁止屏幕滑动
今天写了一个Vue弹层组件,用来全屏查看图片的,大概是下面这么一个效果:
其中背景是透明色的,但是弹出这个组件时手指滑动、鼠标滚轮滑动,底部页面是会动。
作为自己开发的一个常用的组件,这种bug当然是要解决的。
于是学艺不精的我在网上找了蛮久的,看了不少博客,看了不少观点和方法。终于找到了一个最简单、最实在的方法,
代码如下:
<div class="magnify" v-show="isShow" @click.self="hide" @touchmove.prevent @mousewheel.prevent> ... </div>
首先,这个div就是整个遮罩组件的根组件,核心就是div上的事件绑定。
@touchmove 是触摸移动事件
@mousewheel 是鼠标滚轮事件
而加了prevent事件后缀,相信大家都知道是阻止默认事件。
当组件在屏幕最上方显示时,触摸移动事件和鼠标滚轮都被阻止了,所以页面不会再滚动。
在网上也看到了很多给body添加事件的解决方法:
function bodyScroll(event){ event.preventDefault(); } document.body.addEventListener('touchmove',bodyScroll,false);
这里就不说了,网上有很多,我也没用上,所以没有验证,如果是传统页面的,可以使用一下这种方法。
好了,菜鸟要继续去学习了。。。
补充知识:VUE2.0 实现移动端在固定区域内的滚动效果
1.开发工具:微信web开发者工具;
2.项目:嵌在APP中的一个活动,活动是H5页面,使用VUE2.0框架。
3.需求,直接上截图:
item 上拉滚动到底部,遮罩层部分消失;item下拉,遮罩层部分显示。
4.代码:
HTML:
遮罩层部分与滚动区域部分是平级
<template> <div id="selectGoods"> <!--item列表区域--> <div class="goods-area" ref="box"> <div class="goods-list" ref="item" v-for="(item,index) in items" > <img class="left-img" :src="item.goodsUrl" alt=""> <div class="right-text"> <span class="inviter-goods">{{item.resourceName}}</span> <br> <span class="invitee-rules"><span class="person-num">{{item.inviteResourceId}}</span>我是右侧文本第二行</span> </div> </div> </div> <!--列表底部遮罩层--> <div class="bottom-mask" v-show="bottomMaskShow"> <img class="mask-img" src="../../../static/inviteFriends/goodsListMask.png" alt=""> <img class="bottom-triangle" src="../../../static/inviteFriends/xiasanjiao.png" alt=""> </div> </div> </template>
CSS(重点):
.goods-area{ height:8.58rem; overflow-x: hidden; /* 解决左右可以滑动的问题 */ overflow-y: auto; /* 解决左右可以滑动的问题 */ overflow-scrolling: touch; /*兼容性 ios5+、android4+ */ }
JS:
this.$refs.是VUE2.0新增的一个对象,不需要使用JS原生的获取DOM节点的方法,直接在元素上绑定ref,如上,<div ref = "box">,然后再JS中直接调用 this.$refs.box 就可以直接获取。另外,感兴趣的小伙伴可以看一下,console.log(this.$refs.item)的结果。
回归本文主题,vue2.0 中的 mounted 方法,是页面加载后调用方法的地方。这还牵扯到另外一个问题就是VUE的钩子函数(后续工作中有了更深入的体会结合自己的实际项目再写一篇)。
页面加载后,监听滚动区域的 scroll 事件,调用 onScroll 方法,根据滚动的尺寸判断是否已经滚动到底部,控制遮罩层的显示和隐藏。
mounted () { this.$refs.box.addEventListener('scroll', this.onScroll); }, onScroll () { //onScroll方法放在methods:{}中 let nScrollHeight = this.$refs.box.scrollHeight; // 滚动距离总长 内部div的高度 let nScrollTop = this.$refs.box.scrollTop; // 滚动条(点)当前的位置在内部div的高度 里占多少 let itemHeight = nScrollHeight / (this.items.length); // 可以理解为每一个item的高度 let scrollLength = itemHeight * (this.items.length - 4); // 默认显示4个item this.bottomMaskShow = true; if (nScrollTop > (scrollLength -49)) { // 49 这个差值比较灵活,是根据项目中打印出来的item高度和scrollTop实际滚动(出去)的值对比得出的 this.bottomMaskShow = false; } else if(nScrollTop <= (scrollLength -49)){ this.bottomMaskShow = true; } }
其实这个功能没有什么难点,但是自己在这个问题上纠缠了好长时间,在移动端的效果总是不理想,原因在于,在一开始自己就进入了一个误区,认为在微信的开发工具上打印出来的 scrollTop 跟手机上打印出来的是一样的,结果是,完全不一样,手机根据尺寸的大小scrollTop的值也是不一样的。
写在最后:
1.对于移动端的适配问题,灵活,以不变应万变;
2.遇到问题,想想那些点都是“你以为的”,可能就是这些“你以为的”出了问题;
以上这篇在vue中实现禁止屏幕滚动,禁止屏幕滑动就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持猪先飞。
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25- 这篇文章主要为大家详细介绍了vue实现div单选多选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16