解決微信小程式自定義彈窗,滑動自定義彈窗底部的頁面也一起跟著滑動的問題
解決方案,我總結了以下幾種
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;
}
成功解決問題