解决小程序滚动穿透问题

晨旭缘2025-11-01 10:51

背景

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

什么是滚动穿透？

滚动穿透的定义：指我们滑动顶层的弹窗，但效果上却滑动了底层的内容。

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

具体解决方案分析如下：

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

html 复制代码

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

封装的子组件示例：

html 复制代码

<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>

若有其他方案，欢迎讨论