1. 程式人生 > >解決微信小程式自定義彈窗,滑動自定義彈窗底部的頁面也一起跟著滑動的問題

解決微信小程式自定義彈窗,滑動自定義彈窗底部的頁面也一起跟著滑動的問題

解決方案,我總結了以下幾種

1、控制底部根目錄scroll-view 的scroll-y屬性的true/false,控制底部滾動以及不滾動

2、在自定義彈框最外層元素加上catchtouchmove=’true’ ;或者catchtouchmove="preventTouchMove"

Pages({

  preventTouchMove() {}

})

注意!!!,使用場景!!!

適用於自定義內彈框不包含scroll-view 情況下;
此時底部根目錄可以不為scroll-view 也可以生效
而且必須真機測試,電腦客戶端不行


3、底部最外層scroll-view 的scroll-y屬性恆為true

css height 100vh

自定義彈框只需要position:fixed。底層就不會滾動了,這個應該是最近幾個版本微信更新了,自定義彈窗的滾動事件不會冒泡到底部scroll-view了

原文:https://blog.csdn.net/gzyzwx/article/details/82219369?utm_source=copy 
 

我是借鑑第三種:因為我的自定義彈窗中有scroll-view的存在前兩種不好使,

//下面是最外層的view,當顯示彈窗的時候用了另外一個樣式,不顯示彈窗的時候用原始的樣式

<scroll-view class='{{showBuyCon ? "page-con-showbuy" : "page-con"}}'>

css 最外層view樣式:

.page-con{

/* overflow-y: hidden; */

/* background-color: #000; */

/* z-index: -1; */

overflow: hidden;

}

.page-con-showbuy{

height: 100vh;

}

成功解決問題