解决小程序滚动穿透问题

背景

实现一个模态框基本都没有问题，但是，当模态框里边的内容滚动起来以后，就会出现各种各样的让人摸不着头脑的问题，其中，最出名的想必就是滚动穿透。并且有时候小程序的模态框滚动在H5没有问题，但是在小程序中就会出现滚动穿透的问题（可能跟单独封装的uni-popup组件也有关）

什么是滚动穿透？

滚动穿透的定义：指我们滑动顶层的弹窗，但效果上却滑动了底层的内容。
例如：使用uni-popup弹出层组件，里边封装了picker-view滑动选择器，可以滑动选择地址或者时间等等，但是当打开弹出层进行滑动的时候，弹出层的内容没有滑动，打开弹出层的当前页面却滑动了，也就是滑动了底层内容。

具体解决方案分析如下：

父组件（滑出弹出层的页面）加入以下代码：

<template><page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta><view>页面内容<view></template><script>export default{data(){return {show: false, // 控制页面滚动,在打开弹窗的事件中，改变该变量值为true}}}</script>

封装的子组件示例：

<template><view><uni-popup><picker-view><picker-view-column><view>需要滚动选择的页面内容    </view></picker-view-column></picker-view></uni-popup><view></template><script>export default{data(){}}</script>

若有其他方案，欢迎讨论