uni-app using scroll-view to achieve left and right sliding will appear up and down confusion solution

<!-- 左右滑动列表 -->
		<scroll-view scroll-x="true" class="scroll-view" show-scrollbar="false">
			<view class="item" v-for="(item,index) in list" :key="index">
				<image class="item-image unify-radius" :src="item.main_pic || errorImage" mode=""></image>
				<view class="item-name unify-font-size-two-line-astrict">{
   
   {item.goods_name}}</view>
				<view class="item-num">{
   
   {moneySymbol}}{
   
   {item.price}}</view>
			</view>
		</scroll-view>

The above is an example:

The solution is just to add vertical-align:top; to the sub-element class item under scroll-view

.scroll-view {
			white-space: nowrap;
			
			.item {
				width: 160rpx;
				display: inline-block;
				margin-right: 48rpx;
				vertical-align:top;
				
				.item-image {
					width: 160rpx;
					height: 160rpx;
					display: block;
				}
				
				.item-name {
					white-space: normal;
					font-size: $uni-font-size-sm;
					margin: 20rpx 0;
				}
				
				.item-num {
					font-size: $uni-font-size-sm;
					color: $uni-text-color-red;
					font-weight: bold;
				}
			}
			
			.item:last-child {
				margin-right: 30rpx
			}
		}

This solves it

If it is useful to you, pay attention to the blogger's applet, log in to give support, and any open source and useful source code will be uploaded to the applet in the future