uni-app scroll-view中使用部分组件时会在scroll-view中弹出而不是页面底部

uni-app scroll-view中使用部分组件时会在scroll-view中弹出而不是页面底部

测试过的手机：

全手机包括H5

操作步骤：

scroll-view中使用部分组件时会在scroll-view中弹出而不是页面底部

预期结果：

scroll-view中使用部分组件时会在scroll-view中弹出而不是页面底部

实际结果：

scroll-view中使用部分组件时会在scroll-view中弹出而不是页面底部

bug描述：

<view> <scroll-view> <datetime-picker label="交付日期" required placeholder="期望交付日期" startYear="2015" :isAll="true"></datetime-picker> </scroll-view> ``` ``` ``` ```

图片

Image Image

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

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

1 回复

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


这是一个常见的布局问题。当在 scroll-view 中使用 datetime-picker、picker 等原生组件时，这些组件默认会相对于其最近的父级定位容器弹出。由于 scroll-view 本身是一个滚动容器，其内部组件会相对于 scroll-view 的视口定位，导致弹窗出现在 scroll-view 内部而非页面底部。

解决方案：

  1. 将原生组件移出 scroll-view：这是最直接的方法。将 datetime-picker 放在 scroll-view 外部，通过数据绑定控制其显示和值。这样可以确保弹窗在页面级弹出。

  2. 使用 position: fixed 覆盖：如果必须将组件放在 scroll-view 内，可以尝试通过 CSS 将弹窗层定位到全局。但这种方法可能在不同平台或滚动时出现定位异常，需谨慎测试。

  3. 使用非原生组件替代：考虑使用基于 uni-app 自定义组件的日期选择器（如 uni-datetime-picker），这些组件通常不受 scroll-view 限制，但功能可能较原生组件简化。

示例代码（移出 scroll-view）：

<view>
  <scroll-view>
    <!-- 其他内容 -->
    <view @click="showPicker">选择日期</view>
  </scroll-view>
  <datetime-picker 
    v-if="show" 
    @change="onDateChange" 
    @cancel="show = false"
  />
</view>
回到顶部