解决小程序自定义弹窗滚动穿透问题_学习

解决小程序自定义弹窗滚动穿透问题

admin

2024-02-12 02:57:57

在小程序页面里有自定义弹窗时候，希望弹框里的scroll-view可以动，底部背景页面不要动

方法一、catchtouchmove="true"

可以实现弹框背景不滚动，但是也会导致弹框自身无法滚动。

如果你的弹窗本身是不需要滚动的，用这个方法是极佳的。

或者



methods = {
catchTouch () {return;}}

方法二、底部内容区使用scroll-view

设置scroll-view垂直滚动，并将scroll-view的高度设置为屏幕高度，这样就可以实现弹窗自身内容滚动时，而底层内容不滚动。

{windowHeight}}px">底部内容

/*** 生命周期函数--监听页面加载*/onLoad: function (options) {/*获取屏幕高度*/this.setData({windowHeight: wx.getSystemInfoSync().windowHeight})},

3、固定定位（可以解决背景不要滚动，弹框能滚动的问题）

当出现弹窗时，为wxml最外层元素动态添加fixed类。

但是这种方式会导致页面自动回到顶部。

.pop.fixed {position: fixed;left: 0;right: 0;top: 0;bottom: 0;
}

上一篇：辩论这个词造句

下一篇：愁绪的诗词名句

解决小程序自定义弹窗滚动穿透问题

在小程序页面里有自定义弹窗时候，希望弹框里的scroll-view可以动，底部背景页面不要动

方法一、catchtouchmove="true"

可以实现弹框背景不滚动，但是也会导致弹框自身无法滚动。

如果你的弹窗本身是不需要滚动的，用这个方法是极佳的。

或者

方法二、底部内容区使用scroll-view

设置scroll-view垂直滚动，并将scroll-view的高度设置为屏幕高度，这样就可以实现弹窗自身内容滚动时，而底层内容不滚动。

3、固定定位（可以解决背景不要滚动，弹框能滚动的问题）

当出现弹窗时，为wxml最外层元素动态添加fixed类。

但是这种方式会导致页面自动回到顶部。

相关内容

热门资讯