WXML

將整個底層頁面使用 scroll-view 包裹起來，設(shè)置 scroll-y 當(dāng)顯示彈出層的時候?yàn)?true， 閉關(guān)彈出層的時候?yàn)?false

WXSS

Page 設(shè)置為絕對定位，寬高各百分之百 ， scroll-view 高度 百分之百

Page{

position: absolute;

width: 100%;

height: 100%;

display: block;

background: #FAFAFA;

overflow-y: hidden;

}

scroll-view{

height:100%;

}

JS

JS 控制?showModalStatus 的開關(guān)。

不過這引入了新的問題，無法觸發(fā)?onReachBottom? 頁面上拉觸底事件的處理函數(shù)

不介意的話可以使用 scroll-view 的 bindscrolltolower 進(jìn)行解決?bindscrolltolower 方法觸發(fā) onReachBottom()

WXML

JS

bindscrolltolower:function(){

console.log('bindscrolltolower')

var page = getCurrentPages().pop()

console.log(page)

page.onReachBottom()

}

所以另一種方法

WXML

把底層頁面使用 view 包裹起來，動態(tài)設(shè)置樣式

WXSS

動態(tài)樣式開啟模態(tài)層時，絕對定位

.page-fix{

position: fixed;

}

總結(jié)

以上是生活随笔為你收集整理的微信小程序弹出框竖向滚动_微信小程序 解决自定义弹出层滑动时下层页面滚动问题...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。