uni-app ios端scroll-view开启flex默认flex-direction为column时无法横向滚动（已修复）

uni-app ios端scroll-view开启flex默认flex-direction为column时无法横向滚动（已修复）

开发环境 版本号 项目创建方式
Mac Monterey 12.7 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：Monterey 12.7

HBuilderX类型：正式

HBuilderX版本号：3.99

手机系统：iOS

手机系统版本号：iOS 16

手机厂商：模拟器

手机机型：Iphone14

页面类型：nvue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

示例代码：

<view class="container">  
<scroll-view class="scroll-view" scroll-x="true" enable-flex="true" scroll-with-animation="true" @scroll="scrolling" show-scrollbar="false">  
   <view class="menu-item">  
                <view class="item">  
    1  
</view>  
<view class="item">  
    2  
</view>  
<view class="item">  
    3  
</view>  
<view class="item">  
    4  
</view>  
<view class="item">  
    5  
</view>  
<view class="item">  
    6  
</view>  
<view class="item">  
    7  
</view>  
<view class="item">  
    8  
</view>  
<view class="item">  
    9  
</view>  
</view>  
</scroll-view>  
</view>

.container{  

}  

.scroll-view{  
    background-color: #fff;  
           flex-direction: row;   //必须加这个  
}  
    .menu-item{  
          height: 100px;             // item 高度和         2行  
      width: 400px;            // item 宽度和           5列  
          flex-wrap: wrap;  
 }  
.item{  
    height: 50px;  
    width: 80px;  
    border: 1px solid #333;  
}

更多关于uni-app ios端scroll-view开启flex默认flex-direction为column时无法横向滚动（已修复）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

ios无法横向滚动是bug，不需要手动设置flex-direction: column，只要有scroll-x="true"就可以了。 此问题已找到完美解决方案，已分享经验：ios开发scroll-view横向滚动失效，动态获取scroll-view内部子容器总宽度，然后添加个宽度为1，高度跟子元素总宽度相等的view即可

更多关于uni-app ios端scroll-view开启flex默认flex-direction为column时无法横向滚动（已修复）的实战教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢回复，感谢分享。我的问题找出原因啦。

Flex容器默认flex成员项以 column 排列，我是想通过 flex-wrap 为 wrap这个原理实现，1排多列，或者n排n列。

修改办法： scroll-view 中 所有子view，用view 包一层并设置宽度为所有子类宽度和，并且把scroll-view组件flex-direction属性手动设置为row。至于您这边1px的占位view，我没用到。

回复 V***@163.com: 是的，scroll-view添加flex-row样式、内部子元素添加一个flex-row的父容器这种更简单

在 uni-app 中，scroll-view 组件默认情况下是可以实现横向滚动的，但当你在 iOS 端使用 flex 布局，并且将 flex-direction 设置为 column 时，可能会导致横向滚动失效。这个问题在某些版本中已经被修复，但如果你仍然遇到类似问题，可以尝试以下解决方案：

1. 确保 scroll-view 设置了 scroll-x 属性

首先，确保在 scroll-view 组件中设置了 scroll-x 属性，这样才能启用横向滚动。

<scroll-view scroll-x="true">
  <!-- 内容 -->
</scroll-view>

2. 使用 white-space: nowrap 避免换行

在 scroll-view 的子元素中，使用 white-space: nowrap 来防止内容换行，这样可以确保内容在水平方向上排列。

<scroll-view scroll-x="true" style="white-space: nowrap;">
  <view style="display: inline-block; width: 200px;">Item 1</view>
  <view style="display: inline-block; width: 200px;">Item 2</view>
  <view style="display: inline-block; width: 200px;">Item 3</view>
</scroll-view>

3. 避免在 scroll-view 上直接使用 flex-direction: column

如果你在 scroll-view 上直接使用了 flex-direction: column，可能会导致横向滚动失效。可以尝试将 flex 布局应用在 scroll-view 的子元素上，而不是 scroll-view 本身。

<scroll-view scroll-x="true">
  <view style="display: flex; flex-direction: row;">
    <view style="width: 200px;">Item 1</view>
    <view style="width: 200px;">Item 2</view>
    <view style="width: 200px;">Item 3</view>
  </view>
</scroll-view>

4. 使用 overflow: scroll 或 overflow-x: scroll

在某些情况下，可能需要显式地设置 overflow 或 overflow-x 属性来确保滚动行为。

<scroll-view scroll-x="true" style="overflow-x: scroll;">
  <!-- 内容 -->
</scroll-view>

5. 更新 uni-app 版本

如果问题是由于 uni-app 的某些旧版本中的 bug 导致的，建议更新到最新版本，以确保问题已经被修复。

# 更新 uni-app
npm update -g [@vue](/user/vue)/cli [@vue](/user/vue)/cli-service-global
回到顶部