在小程序页面里有自定义弹窗时候,希望弹框里的scroll-view可以动,底部背景页面不要动
方法一、catchtouchmove="true"
可以实现弹框背景不滚动,但是也会导致弹框自身无法滚动。
如果你的弹窗本身是不需要滚动的,用这个方法是极佳的。
<view class="pop" catchtouchmove="true">
<view class="content"></view>
</view>
或者
<view class="pop" catchtouchmove="catchTouch">
<view class="content"></view>
</view>
methods = {
catchTouch () {
return;
}
}
方法二、底部内容区使用scroll-view
设置scroll-view垂直滚动,并将scroll-view的高度设置为屏幕高度,这样就可以实现弹窗自身内容滚动时,而底层内容不滚动。
<scroll-view class="container" scroll-y style="height:{{windowHeight}}px">
底部内容
</scroll-view>
<view class="pop"></view>
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
/*获取屏幕高度*/
this.setData({
windowHeight: wx.getSystemInfoSync().windowHeight
})
},
3、固定定位(可以解决背景不要滚动,弹框能滚动的问题)
当出现弹窗时,为wxml最外层元素动态添加fixed类。
但是这种方式会导致页面自动回到顶部。
.pop.fixed {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
文章来源地址https://www.toymoban.com/news/detail-486206.html
文章来源:https://www.toymoban.com/news/detail-486206.html
到了这里,关于解决小程序自定义弹窗滚动穿透问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!