小程式解決彈窗滑動穿透問題

2021-10-09 04:06:05 字數 364 閱讀 9204

## 解決方案

1.當彈窗沒有滾動條的時候

直接監聽 catch:touchmove 方法, 然後直接返回就可以了

preventtouchmove()

2.當彈窗內容需要滾動的時候&&當前頁面無需滾動如果你頁面沒有滾動條可以直接給當前頁面最父級元素fixed定位一下或者overflow:hidden一下

3當彈窗內容需要滾動的時候&&當前頁面也需滾動

我彈窗滾動用的是scroll-view,在外層加乙個view包上並在這個view上使用catchtouchmove具體如下圖

解決小程式彈出層滾動穿透的問題

最近在做彈窗的時候遇到的問題,就是遮罩後面的內容可以滾動,查詢資源發現是兩種情況,一是遮罩層有滾動元件,乙個是遮罩層沒有滾動元件,下面就來說說如何解決這兩種情況。使用前後對比 一 當彈出層裡面無滾動的時候 可以在遮罩的view標籤上定義乙個防止事件冒泡的方法 catchtouchmove preve...

小程式自定義彈窗 解決點透問題

您的通知已傳送成功!知道了 wx popup wx popup popup container wx popup popup container wx popup release tip wx popup popup container wx popup release tip item wx po...

小程式彈窗阻止滑動的兩種方法

彈出 fixed 彈窗後,在彈窗上滑動會導致下層的頁面一起跟著滾動。場景1 彈窗內無滾動內容 可以在彈窗最外層元素繫結touchmove事件,觸發事件返回false即 在vue類框架中也可以加.stop阻止冒泡 簡單寫法 catchtouchmove true 此種方式會阻止彈窗內內容的滾動。場景二...