uni-app uni-popup组件中使用scroll-view组件时出现的bug

uni-app uni-popup组件中使用scroll-view组件时出现的bug

6 回复

代码没问题么?

更多关于uni-app uni-popup组件中使用scroll-view组件时出现的bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


能否吧相关代码贴一下

还有,您这个是nvue页面还是vue页面

https://uniapp.dcloud.io/component/uniui/uni-popup 参考注意事项第四行

这是正常现象，现在还没有什么好的方法阻止下层元素的滚动，这是弹出类元素比较常见的一个问题 各平台可以通过下面的方法临时解决：

h5 传统方法即可

wx、app 可以使用 page-meta 组件阻止滚动穿透，不过限制比较大

其他平台无法阻止滚动穿透，建议使用 scroll-view 滚动 ，手动设置 overflow:hidden 来阻止滚动

在uni-app的uni-popup中使用scroll-view时，常见问题及解决方案如下：

  1. 滚动失效

    • 原因：uni-popup的遮罩层可能拦截了触摸事件。
    • 解决：为scroll-view添加属性 @touchmove.stop 阻止事件冒泡，或检查uni-popup的mask-click配置是否影响滚动。

  2. 高度异常

    • 原因：scroll-view未设置固定高度，或父容器高度未撑开。
    • 解决：显式设置scroll-view的height（如100vh或具体像素值），或通过CSS确保父级高度有效。

  3. 滚动穿透

    • 现象：滚动scroll-view时底层页面跟随滚动。
    • 解决：在scroll-view的@touchmove事件中调用e.stopPropagation()，或在uni-popup显示时禁用页面滚动（通过page-meta或动态样式）。

  4. 性能问题

    • 大量内容在scroll-view中可能导致渲染卡顿。
    • 优化：启用scroll-view的enable-back-to-top属性，或对长列表使用<list>组件替代。

  5. 平台差异

    • 部分问题仅出现在特定平台（如小程序）。
    • 调试：使用条件编译（#ifdef MP-WEIXIN）针对平台调整样式或逻辑。

示例代码调整：

<uni-popup>
  <scroll-view 
    style="height: 300px" 
    @touchmove.stop
    scroll-y
  >
    <!-- 内容 -->
  </scroll-view>
</uni-popup>
回到顶部