问题描述

页面是可以滚动的，该页面的弹窗、组件也是可以滑动的。
当我们滑动页面内弹出的弹窗、组件时，该页面也会跟着滚动，就会出现滚动弹窗内容时，页面内容也跟着滚动，这就是滚动穿透。

在PC端我们常通过给弹出弹窗的页面的body添加overflow: hidden，隐藏未显示的内容，来阻止页面滚动。但是小程序里没有body，故此方法不可行。

解决办法

可以使用page-meta组件：页面属性配置节点，用于指定页面的一些属性、监听页面事件。
当打开弹窗时，给page-mate添加overflow: hidden属性来组织页面滚动。

<page-meta :page-style="noSlide?'overflow: hidden;' : 'overflow: auto;'"></page-meta>

补充知识点

它是一个特殊的标签，有点类似html里的header标签。
页面的背景色、原生导航栏的参数，都可以写在page-meta里。
从某种意义讲，page-meta对pages.json有一定替代作用，可以让页面的配置和页面内容代码写在一个vue文件中。
它还可以实现通过变量绑定来控制页面配置。但它的性能不如pages.json的配置，在新页面加载时，渲染速度还是pages.json方式的写法更快。
page-meta只能是页面内的第一个节点。可以配合 navigation-bar 组件一同使用。

指路官方文档：page-meta-页面属性配置节点