uni-app 关于scroll容器内flex对齐的Bug

uni-app 关于scroll容器内flex对齐的Bug

开发环境 版本号 项目创建方式
Windows win10 CLI 
## 示例代码：

```html
<scroll-view enable-flex class="flex-row flex-center" :scroll-x="true" :show-scrollbar="false" style="height:40px">  
    <view class="flex-center flex" style="height:40px">  
        <text >消息</text>  
    </view>  
</scroll-view>

操作步骤：

如上示例，使用flex上下剧中，任何样式都失效，包括margin.只有padding有效。

预期结果：

上下，左右剧中

实际结果：

居顶左。

bug描述：

【补充下本页是从nvue编译到小程序中的问题】套在scrioll中的元素无法使用flex上下对齐，在微信小程序中。已测试：h5,app nvue 安卓和ios都正常。另外还有一个scrioll中的bug.当你开启flex时。因为官方在scroll 中的外层使用了flex但，内部还封了个view,这个view并没有启用flex导致在非nvue中失效（原则上并未开启）。官方结构

<scroll-view class="flex"> //注意，官方只在这里开启。  
<view>//而这里并没有开启。导致内容开启不了flex,解决办法是自己在套一层view使用flex，但这样做在布局的时候就得用条件编译分nvue和非nvue。相当于，官方人为的增加了兼容的工作量。  
<slot />  
</view>  
<scroll-view>

更多关于uni-app 关于scroll容器内flex对齐的Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

有兴趣试试加上enable-flex属性吗？ https://uniapp.dcloud.io/component/scroll-view.html

更多关于uni-app 关于scroll容器内flex对齐的Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


建议你研究下官方的结构，或者仔细看下我的描述。再来回我，感谢你的帮助。

发完整代码

讲述的还不够详细么，，，scroll-view结构我也研究了，你们在nvue编译到h5是自动加了预置格式，这样做是对的。但你们漏掉了scroll-view里面的第层没有被初始化掉。你按照我的示例试下。就知道结果了。

在 uni-app 中，使用 flex 布局时，如果 flex 容器位于 scroll-view 或 scroll 容器内，可能会遇到一些布局对齐的 Bug。以下是一些常见的问题及其解决方案：

常见问题

  1. 子元素无法正确对齐
    在 scroll-view 中使用 flex 布局时，子元素的 justify-content 或 align-items 可能无法按预期对齐。

  2. 滚动区域高度问题
    scroll-view 的高度可能没有正确计算，导致内容无法滚动或布局错乱。

  3. iOS 平台上的兼容性问题
    在 iOS 设备上，flex 布局在 scroll-view 中可能会出现额外的间距或对齐问题。

解决方案

1. 确保 scroll-view 的高度正确

  • 如果 scroll-view 的高度没有设置，可能导致内容无法滚动或布局异常。可以通过以下方式设置高度：
    <scroll-view style="height: 100vh;">
  <view class="flex-container">
    <!-- 内容 -->
  </view>
</scroll-view>
  • 或者使用 calc 动态计算高度：
    <scroll-view style="height: calc(100vh - 100px);">
  <view class="flex-container">
    <!-- 内容 -->
  </view>
</scroll-view>

2. 检查 flex 容器的样式

  • 确保 flex 容器的样式正确，特别是 display: flex 和 flex-direction 等属性：
    <view class="flex-container" style="display: flex; flex-direction: row; justify-content: space-between;">
  <view>Item 1</view>
  <view>Item 2</view>
</view>

3. 处理 iOS 平台的兼容性问题

  • 在 iOS 上，flex 布局可能需要额外的样式调整。可以尝试以下方法：
    • 添加 -webkit-box 前缀：
      .flex-container {
  display: -webkit-box;
  display: flex;
}
    • 确保 scroll-view 的子元素没有额外的间距：
      .flex-container > view {
  margin: 0;
  padding: 0;
}

4. 使用 scroll-view 的 scroll-y 属性

  • 如果需要在垂直方向滚动，确保启用 scroll-y：
    <scroll-view scroll-y style="height: 100vh;">
  <view class="flex-container">
    <!-- 内容 -->
  </view>
</scroll-view>

5. 避免嵌套 flex 容器

  • 如果 flex 容器嵌套在另一个 flex 容器中，可能会导致布局异常。尽量避免多层嵌套，或者调整外层容器的样式。

6. 使用 uni-app 的 page 样式

  • 如果问题依然存在，可以尝试在 page 样式中设置全局样式：
    page {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

示例代码

以下是一个完整的示例，展示了如何在 scroll-view 中使用 flex 布局：

<template>
  <scroll-view scroll-y style="height: 100vh;">
    <view class="flex-container" style="display: flex; flex-direction: column; align-items: center;">
      <view style="width: 100%; height: 100px; background-color: #f0f0f0;">Item 1</view>
      <view style="width: 100%; height: 100px; background-color: #e0e0e0;">Item 2</view>
      <view style="width: 100%; height: 100px; background-color: #d0d0d0;">Item 3</view>
    </view>
  </scroll-view>
</template>
回到顶部