微信小程式彈窗滾動導緻頁面穿透問題的解決辦法

最近在做小程式，由于小程式提供的彈窗樣式有限，我們通常會自定義彈窗元件（我都是在彈窗蒙層上加了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這個元件啦~