技术专业版微信小程序_在vue中完成禁止屏幕滚动,禁止屏幕滑动

  • 栏目:行业动态 时间:2021-01-05 12:43 分享新闻到:
<返回列表

在vue中实现禁止屏幕滚动,禁止屏幕滑动       这篇文章主要介绍了在vue中实现禁止屏幕滚动,禁止屏幕滑动,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

今天写了一个Vue弹层组件,用来全屏查看图片的,大概是下面这么一个效果:

其中背景是透明色的,但是弹出这个组件时手指滑动、鼠标滚轮滑动,底部页面是会动。

作为自己开发的一个常用的组件,这种bug当然是要解决的。

于是学艺不精的我在网上找了蛮久的,看了不少博客,看了不少观点和方法。终于找到了一个最简单、最实在的方法,

代码如下:

 div 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 ref="box" 
 div ref="item" v-for="(item,index) in items" 
 img :src="item.goodsUrl" alt="" 
 div 
 span {{item.resourceName}} /span br 
 span span {{item.inviteResourceId}} /span 我是右侧文本第二行 /span 
 /div 
 /div 
 /div 
 !--列表底部遮罩层-- 
 div v-show="bottomMaskShow" 
 img src="../../../static/inviteFriends/goodsListMask.png" alt="" 
 img 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中完成禁止屏

行业动态 2021-01-05
在vue中完成严禁显示屏翻转,严禁显示屏拖动 本文关键详细介绍了在vue中完成严禁显示屏...
查看全文

线上报名小程序_JavaScript编写开发动态时

行业动态 2021-01-05
JavaScript撰写开发设计动态性数字时钟 /article/details/ 本文关键为大伙儿详尽详细介绍了J...
查看全文

网络抽签小程序_javascript完成时间日期的

行业动态 2021-01-05
javascript完成時间时间的文件格式化的方式归纳 本文关键详细介绍了javascript完成時间时间...
查看全文
返回全部新闻


区域站点: 南丰县如何创建网站   南宫市建站公司   囊谦县建网站   南和县一键建站   南华县如何创建网站   南江县建站公司   南京市建网站   南靖县一键建站   南康市如何创建网站   南乐县建站公司   南陵县建网站   南宁市一键建站   南平市如何创建网站   南皮县建站公司   南市区建网站   南通市一键建站   南投县如何创建网站   南雄市建站公司   南溪县建网站   南阳市一键建站   南漳县如何创建网站   南召县建站公司   南郑县建网站   那坡县一键建站   那曲县如何创建网站   纳雍县建站公司   讷河市建网站   内黄县一键建站   内江市如何创建网站   内丘县建站公司   内乡县建网站   嫩江市一键建站   聂荣县如何创建网站   尼玛县建站公司   尼木县建网站   宁安市一键建站   宁波市如何创建网站   宁城县建站公司   宁德市建网站   宁都县一键建站   宁国市如何创建网站   宁海县建站公司   宁化县建网站   宁晋县一键建站   宁陵县如何创建网站   宁明县建站公司   宁南县建网站   宁强县一键建站   宁陕县如何创建网站   宁武县建站公司   宁乡市建网站   宁阳县一键建站   宁远县如何创建网站   农安县建站公司   磐安县建网站   盘锦市一键建站   盘山县如何创建网站   磐石市建站公司   盘州市建网站   蓬安县一键建站   澎湖县如何创建网站   蓬莱市建站公司   彭山县建网站   蓬溪县一键建站   彭阳县如何创建网站   彭泽县建站公司   彭州市建网站   偏关县一键建站   平安县如何创建网站   平昌县建站公司   平定县建网站   屏东县一键建站   平度市如何创建网站   平果县建站公司   平和县建网站   平湖市一键建站   平江县如何创建网站   平乐县建站公司   平凉市建网站   平利县一键建站   平罗县如何创建网站   平陆县建站公司   屏南县建网站   平泉市一键建站   屏山县如何创建网站   平顺县建站公司   平塘县建网站   平潭县一键建站   平武县如何创建网站   萍乡市建站公司   平乡县建网站   平阳县一键建站   平遥县如何创建网站   平阴县建站公司   平邑县建网站   平远县一键建站   平舆县如何创建网站   皮山县建站公司   普安县建网站   浦北县一键建站   浦城县如何创建网站   普洱市建站公司   普格县建网站   浦江县一键建站   普兰县如何创建网站   普宁市建站公司   莆田市建网站   迁安市一键建站   乾安县如何创建网站   潜江市建站公司   潜山市建网站  

友情链接: 自助建站 怎么自己建网站 免费网站建设 外包建站公司

Copyright © 2002-2020 建网站_一键建站_如何创建网站_建站公司_个人博客免费建站平台 版权所有 (网站地图) 备案号:粤ICP备10235580号