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

在小程序页面里有自定义弹窗时候，希望弹框里的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;
}

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

html如何写微信弹窗,微信小程序自定义弹窗实现过程(附代码)_而已_前端开发者...
这篇文章主要介绍了微信小程序自定义弹窗实现过程(附代码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下小程序官网里弹出框一般都是类似下面形式: ...
解决小程序自定义底部菜单切换闪动
解决小程序自定义底部菜单切换闪动业务上可能会有一个需求使用自定义底部菜单相信会有很多人遇到过这个需求但是自定义底部菜单会有一个问题,在点击切换页面的时候底部菜单会重新加载,导致页面闪动,比较影响用 ...
微信小程序点击按钮弹出弹窗_微信小程序自定义弹窗(可通用)
本文为自定义弹窗,该内容可满足如下需求: 自定义各种布局弹窗. 点击弹窗布局外消失弹窗弹出弹窗时背景阴影半透明各方向弹出效果(本文为自下而上弹出). (后续可能会补充新需求,或可以留言讨论你的需求 ...
解决小程序自定义导航栏和右边胶囊高度一致
名词解释: 1.statusBarHeight:状态栏高度(小程序可获取),是指顶部显示手机信号,时间,电量的那一个小的状态条的高度.如图红色部分. 2.titleBarHeight:标题栏高度(小程 ...
微信小程序自定义弹窗组件 action-sheet
最近公司在开发短剧小程序,短剧的剧集展示交互需要用到组件 action-sheet,小程序自带的有这个组件,但是这个组件支持的功能比较单一,相当于是一个选择表一样,不能自定义很多内容,只能自定义一个组 ...
微信小程序自定义弹窗组件
看微信小程序的文档觉得说的不是很清楚.于是,找到这篇文章,觉得挺好看.大家可以看看: https://www.cnblogs.com/demod... 补充: 还需要在popup.json文件添加一句 ...
微信小程序自定义弹窗实例
自定义模态对话框实例由于官方API提供的显示模态弹窗,只能简单地显示文字内容,不能对对话框内容进行自定义,欠缺灵活性,所以自己从模态弹窗的原理角度来实现了自定义的模态对话框. wx.showModa ...
小程序自定义弹窗 half-screen-dialog
html 文件 <view class="half-screen-dialog-area"><viewwx:if="{{isShow}}"cl ...
小程序导航栏透明，精准设置小程序自定义标题的高度和定位
这里写自定义目录标题场景设置页面标题栏为自定义模式一些概念 - 重点解决方案详细代码 util.js 主页面自定义标题栏组件场景常见场景为ui小姐姐为页面顶部设计了漂亮的图片例如我们的 ...

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

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

方法一、catchtouchmove="true"

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

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

或者

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

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

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

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

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

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

最新文章

热门文章