<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;
}
V***@163.com (作者)
谢谢回复，感谢分享。我的问题找出原因啦。
Flex容器默认flex成员项以 column 排列，我是想通过 flex-wrap 为 wrap这个原理实现，1排多列，或者n排n列。
修改办法：
scroll-view 中 所有子view，用view 包一层并设置宽度为所有子类宽度和，并且把scroll-view组件flex-direction属性手动设置为row。至于您这边1px的占位view，我没用到。
2024-03-22 21:23
c***@e-buy.com
回复 V***@163.com: 是的，scroll-view添加flex-row样式、内部子元素添加一个flex-row的父容器这种更简单
2024-03-25 13:40