uni-app中scroll-view内使用uni-data-picker或picker等底部弹出组件时会在页面中间弹出

uni-app中scroll-view内使用uni-data-picker或picker等底部弹出组件时会在页面中间弹出

开发环境 版本号 项目创建方式
Windows win10 HBuilderX 
# 测试过的手机：
全手机

## 操作步骤：
scroll-view中使用uni-data-picker或picker等底部弹出的组件会在页面中间弹出

## 预期结果：
scroll-view中使用uni-data-picker或picker等底部弹出的组件会在页面中间弹出

## 实际结果：
scroll-view中使用uni-data-picker或picker等底部弹出的组件会在页面中间弹出

## bug描述：
在使用了scroll-view组件时   uni-data-picker等底部弹出的组件会在页面中间弹出

![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20210929/ff4e5e9c3fbed704138ee3bf69cba185.png)

更多关于uni-app中scroll-view内使用uni-data-picker或picker等底部弹出组件时会在页面中间弹出的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app中scroll-view内使用uni-data-picker或picker等底部弹出组件时会在页面中间弹出的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的常见问题，由 scroll-view 的布局特性与 uni-data-picker 等弹出组件的定位机制冲突导致。

核心原因： scroll-view 是一个可滚动的容器，其内部元素默认采用相对定位。而 uni-data-picker、picker 等底部弹出组件的弹出层（如 uni-popup）在默认情况下，其定位参考的是最近一个非 static 定位的父元素。当 scroll-view 发生滚动时，其内部坐标体系会发生变化，导致弹出层计算位置错误，从而出现在可视区域中间而非底部。

解决方案：

  1. 强制全局定位（推荐）： 在 uni-popup 组件上设置 mask-click 属性为 false 可能不直接解决，但关键是为弹出层指定固定的定位参考。最有效的方法是在 pages.json 的对应页面样式或全局样式中，为弹出层组件设置固定定位，使其脱离 scroll-view 的影响。
    /* 在页面的style中或全局App.vue的style中 */
.uni-popup__wrapper {
    position: fixed !important;
    z-index: 999;
}
回到顶部