微信小程序弹窗滚动导致页面穿透问题的解决办法

最近在做小程序，由于小程序提供的弹窗样式有限，我们通常会自定义弹窗组件（我都是在弹窗蒙层上加了catchtouchmove="true",保证最基本的穿透问题但是解决不了弹窗内容区域需要滚动的情况），那么就会导致页面穿透问题，具体表现有手指上下滑动弹窗部分，底部页面也同时滑动、如果配置了onPullDownRefresh页面刷新则页面刷新也会触发，我的解决过程如下：

1.最简单的想法：

最开始我想到的是弹窗后动态设置最外层的overflow:hidden,这个办法会引起页面滚回到顶部，不会记住滚动位置，如果弹窗内容也是带滚动的也同样会触发页面刷新的问题。

2.一个很笨效果又不好的办法：

由于小程序提供的页面刷新不能动态设置，所以我单独写了一个动态刷新的办法，页面主体内容区域用scroll-view包裹，暂且能达到，不触发原生的onPullDownRefresh事件，但是我发现在ios和安卓机上显示的情况不一致呀，安卓机尚且可以，ios上页面依然可以狂妄的滚动，于是试了一下在外层加overflow：hidden，并没有什么用，第二个办法放弃。

3.自认为完美的解决办法：

1）自定义的弹窗上的滚动区域有原来的view块变成scroll-view块；

2）整个弹窗都设置了catchtouchmove="true"（发现scroll-view部分还能用，nice）；

3）页面主体把原先的自定义刷新事件、scroll-view包裹都去掉了，就是清清爽爽的view和原生小程序刷新；

这时滚动弹窗scroll-view部分还能正常滚动，且底部页面也都不受影响，惊奇的发现以上问题都解决了，而且比第二部减少了很多代码，测试安卓和ios都可以。

开始喜欢并尊敬scroll-view这个组件啦~

微信小程序弹窗滚动导致页面穿透问题的解决办法相关推荐

微信小程序弹窗滚动穿透问题
解决点击穿透在原生中使用el.addEventListener("touchstart", () => { console.log("ok"); }, ...
微信小程序input弹出键盘挡住文字的解决办法
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 解决思路:阻止键盘弹起时,自动上推页面.输入框获取焦点的时候让页面绝对定位,相对底部 100 像素.失去焦点的 ...
微信小程序image图无法加载出来的解决办法（亲测有效）
在微信小程序中,第一次加载页面时图片(线上图)加载不出来/图片灰色背景显示,这个时候该如何解决这个问题呢?请带着问题查看这篇博客,希望对您有所帮助(点赞skr) 看官方文档? 自行解决? 写在前面(初 ...
微信小程序分享朋友圈的实现思路与解决办法
转自:https://www.cnblogs.com/till-the-end/p/8470557.html 简介截止我写这篇文章的时候,小程序应该是还没有能够直接分享到朋友圈的api,转发给朋友和 ...
微信小程序中图片高度被压扁的解决办法
微信小程序开发中使用image标签展示的长图因为太长,就会被压扁变形,让人看起来很难看,那如何才能让图片的高度自适应呢?使用css的height:auto也没办法实现. 翻看了小程序社区的问答,发现了 ...
微信小程序:调取数字键盘，没有小数点的解决办法
通常来说:input框有type这个属性,我们通常使用text.number .checkbox等这些常用的type值来限制输入框的输入. 在微信小程序中,当我们的输入框的type值为number的时 ...
微信小程序登录获取不到头像和昵称解决办法！
微信小程序登录获取不到头像和昵称主要原因是:小程序wx.getUserProfile接口被收回! 大家可以按照文档操作↓ PS: 针对小程序wx.getUserProfile接口将被收回后做出的授权调 ...
微信小程序画布（canvas）生成图片模糊的解决办法
我们在用微信小程序画canvas可能会遇到生成的图片保存后很模糊的问题,根据之前的经验,我总结了两种解决办法,分别从画canvas,和保存的角度解决,各有利弊. 1.画canvas时,都用设计稿的2倍 ...
解决: 微信小程序调用云函数数据库一直失败的解决办法
今天跟着教程做一个新的Demo,死活都不能向云函数数据库添加数据,对照代码找了好久也没发现问题,看了很多帖子都不能解决,直到看到了快被云函数逼疯了这个帖子. 这是一个微信小程序开发的一个BUG,如果你 ...

微信小程序弹窗滚动导致页面穿透问题的解决办法

微信小程序弹窗滚动导致页面穿透问题的解决办法相关推荐

最新文章

热门文章