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;  
}


3 回复

终于…下方是正确代码，希望对后来者有帮助！祝大家开发顺利！！
不知道为什么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;
}


你这个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;  
}
回到顶部