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

最近在做小程序，由于小程序提供的弹窗样式有限，我们通常会自定义弹窗组件（我都是在弹窗蒙层上加了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这个组件啦~