vue實現乙個移動端遮蔽滑動的遮罩層

2022-07-07 12:03:11 字數 694 閱讀 9253

在扯廢話浪費大家的時間之前,先上個**好了,使用vue實現起來很簡單……

對,就是這麼簡單,加上@touchmove.prevent就可以遮蔽滑動頁面了,然後再和普通的遮罩層一樣,加點樣式

/*遮罩層*/

.overlayer

如此,便可以了_(:з)∠)_,vue真是好用啊……

如果彈窗不在遮罩層內部,那麼冒泡就不會經過遮罩層,也就無法遮蔽滑動了0.0

如果在這個div中滑動,觸發的事件是不會經過overlayer的,也就無法遮蔽滑動了

如果實在不能把彈窗放到遮罩層內,那麼給彈窗加乙個單獨的 .prevent 修飾符也可以,下面這兩種方式都是有效的:

如果在這個div中滑動,觸發的事件會經過overlayer,可以遮蔽滑動

如果在這個div中滑動,觸發的事件也會被禁用預設行為, 也可以遮蔽滑動

這種遮蔽方式只是遮蔽了滑動,對於pc端的滑鼠滾輪是無效的,但遮蔽滑鼠滾輪也很簡單,把 touchmove 事件處理器改成 scroll 事件的處理器就好了~就像這樣:

參考:萬能的官方文件-事件修飾符

封裝乙個移動端的滑動事件

if window.swipe swipe.iscroll function args swipe.iscroll.prototype 如果不存在父容器就停止初始化 if that.parentdom return false 找到子容器 that.childdom that.parentdom.c...

乙個遮蔽廣告程式的簡單實現

筆者前幾天中了乙個廣告程式,經常彈出該廣告,不勝其煩,一直在想怎麼去掉這個煩人的廣告,想想用一下api函式應該可能關掉該廣告。該程式如下 先定義乙個 函式bool callback enumwindowsfuntions hwnd hwnd,lparam lparam 為的是跟enumwindows...

使用vue寫乙個移動端上下滑動的輪播元件

由於業務需求,需要乙個移動端上下滑動的輪播圖功能 由於沒找到合適的輪子,所以自行寫了乙個 沒有寫定時器,有需要自行加個就行了 設計思路很簡單,利用了css的動畫來實現 先看看效果 注意事項 上下滑動輪播檢視 collection preview img list class left prev cl...