<!-- wxml -->
<scroll-view class="scroll-view-sku" scroll-x="true" style="width: 100%;height: 244rpx;">
<view class="scroll-view-item">
<text>123</text>
</view>
<view class="scroll-view-item"></view>
<view class="scroll-view-item"></view>
</scroll-view>
<!-- wxss -->
.scroll-view-item {
position: relative;
display: inline-block;
width: 206rpx;
height: 240rpx;
margin-right: 10px;
border-radius: 16rpx;
border: 1rpx solid rgba(0,0,0,0.2);
}
当其它两个view都有text标签且内容一样就会齐平，内容不一样就会上下错位，尝试给scroll-view设置了line-height也没有用。
.scroll-view-item{
min-height: 200px;
margin-right: 10px;
aspect-ratio: 1 / 1;
width: calc((100% - 20px)/3);
}
.scroll-view-item:nth-child(3n){
margin-right: 0;
}
<view class="warp">
<view class="item">
<text>123</text>
</view>
<view class="item"></view>
<view class="item"></view>
<view class="item">
<text>123</text>
</view>
<view class="item"></view>
<view class="item"></view>
<view class="item">
<text>123</text>
</view>
<view class="item"></view>
<view class="item"></view>
<view class="item">
<text>123</text>
</view>
<view class="item"></view>
</view>
</scroll-view>
width: 100vw;
height: 210rpx;
background-color: #f3f3f3;
}
.warp{
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
.item {
flex-shrink: 0;
height: 200rpx;
margin-right: 10rpx;
margin-bottom: 10rpx;
border: 1rpx solid red;
width: calc((100% - 20rpx)/3);
}
.item:nth-child(3n){
margin-right: 0;
}
找到了一个方式：scroll-view套了一层view使用flex，这样子可以避免因为内容不一样产生的错位。设置一下view的宽度。
看我主页的小程序，有一样的示例