uniapp x中scroll-view竖向滚动问题的bug

uniapp x中scroll-view竖向滚动问题的bug

问题描述

uniapp x中，scroll-view竖向滚动问题，用了各个方法，想让子项在一行中显示几个，超出的会自动换行。但是不知道为什么一行只能显示一个子项。

现在上下滑动没问题

<scroll-view class="scroll-view" direction="vertical">  
    <view v-for="(item, index) in aaList" :key="index" class="scroll-item">  
    </view>  
</scroll-view>

.scroll-view {  
    width: 100%;  
    flex: 1;  
    border-radius: 30rpx;  
    overflow: hidden;  
    padding: 20rpx;  
    display: flex;  
    flex-wrap: wrap;  
    justify-content: center;  
    background-color: pink;  
}  

.scroll-item {  
    width: 100rpx;  
    height: 110rpx;  
    background-color: #F5F5F5;  
    margin: 10rpx;  
}


4 回复

终于…下方是正确代码，希望对后来者有帮助！祝大家开发顺利！！
不知道为什么uniapp x要这样设计css，是真坑呀，
<scroll-view class="scroll-view" direction="vertical">
<view class="container">
<view v-for="(item,index) in aaList" :key="index" class="scroll-item">
{{index}}
</view>
</view>
</scroll-view> .scroll-view {
width: 100%;
flex: 1;
// height: 1000rpx; //flex: 1;和高度，现在试的都行
padding: 20rpx;
background-color: pink;
}
.container {
// width: 100%; //中间件不能有宽高，不然不滚动
// height: 100%;

// 中间件中：下方三个少哪个都不行  
display: flex;  
flex-wrap: wrap;  
flex-direction: row;

}

.scroll-item {
width: 100rpx;
height: 110rpx;
margin: 10rpx;
background-color: #F5F5F5;
}


您的问题在于直接在scroll-view上应用了flex-wrap: wrap，但uni-app x的scroll-view组件对flex布局有特殊处理。根据知识库文档，App平台scroll-view组件默认高度取值为子元素高度之和，且不支持直接通过flex-wrap实现网格布局。
核心问题：

uni-app x中flex默认方向是column（纵向），即使设置flex-wrap: wrap也无法实现横向多列
scroll-view的direction="vertical"仅控制滚动方向，不改变内部布局逻辑

正确解决方案： <scroll-view class="scroll-view" direction="vertical">
<view class="container">
<view v-for="(item, index) in aaList" :key="index" class="scroll-item"></view>
</view>
</scroll-view> .scroll-view {
width: 100%;
flex: 1;
padding: 20rpx;
background-color: pink;
/* 移除display/flex-wrap */
}

.container { /* 关键：新增flex容器 */
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.scroll-item {
width: 100rpx;
height: 110rpx;
margin: 10rpx;
background-color: #F5F5F5;
} 原因说明：

uni-app x的flex-flow文档明确说明：“在uni-app x中默认是竖排”
scroll-view需要明确的高度约束才能触发滚动（参考scroll-view高度规则）
直接在scroll-view上使用flex-wrap会导致布局计算异常，必须通过中间容器实现网格布局

注意：确保.scroll-view有明确高度（如height: 100vh或父容器高度），否则根据文档规则，当子元素总高度等于scroll-view高度时将无法滚动。 内容为 AI 生成，仅供参考

你这个rpx用的太多了，影响性能 参考：https://doc.dcloud.net.cn/uni-app-x/css/common/length.html#rpx

问题出在CSS布局上。scroll-view默认是块级元素，你虽然设置了display: flex和flex-wrap: wrap，但direction="vertical"的scroll-view默认是纵向滚动的容器，其内部子项的排列方式需要正确设置。

要让子项在一行显示多个并自动换行，需要修改CSS：

  1. 移除scroll-view的display: flex：scroll-view本身不需要设为flex容器。
  2. 为scroll-view添加white-space: normal（可选，但建议）。
  3. 在scroll-view内部添加一个包裹容器，并在这个容器上设置flex布局。

修改后的代码示例：

<scroll-view class="scroll-view" direction="vertical">  
    <view class="content-wrapper">
        <view v-for="(item, index) in aaList" :key="index" class="scroll-item">  
        </view>
    </view>
</scroll-view>

.scroll-view {  
    width: 100%;  
    flex: 1;  
    border-radius: 30rpx;  
    overflow: hidden;  
    padding: 20rpx;  
    background-color: pink;  
}  

.content-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.scroll-item {  
    width: 100rpx;  
    height: 110rpx;  
    background-color: #F5F5F5;  
    margin: 10rpx;  
}
回到顶部