在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="在vue中實現禁止螢幕滾動,禁止螢幕滑動"> <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="在vue中實現禁止螢幕滾動,禁止螢幕滑動"> <img class="bottom-triangle" src="../../../static/inviteFriends/xiasanjiao.png" alt="在vue中實現禁止螢幕滾動,禁止螢幕滑動"> </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中實現禁止螢幕滾動,禁止螢幕滑動就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。