关于小程序＜/scroll-view＞横向滚动不生效解决方案

1.scroll-view 标签要设置 scroll-x

html代码

<view class="czCard">
			<scroll-view class="cardList" scroll-x>
				<view class="itembox" v-for="i in 4" :class="i==0?'activeitembox':''">
					<view class="box">
						<view class="CZprice">
							100元
						</view>
						<view class="sendPri">
							赠送10元
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

2.要给scroll-view标签类名为cardList设置宽度，但不能为100%,还有设置white-space: nowrap;display: inline-block;

css代码

.czCard {
			height: 200rpx;
			display: inline-block;
			margin: 26rpx 0 50rpx;


			.cardList {
				width: 828rpx;
				height: 100%;
				white-space: nowrap;
				display: inline-block;


				.itembox {
					width: 260rpx;
					height: 200rpx;
					margin-right: 24rpx;

					background-color: #ffffff;
					border-radius: 20rpx;
					border: solid 2rpx #eaeaea;

					display: inline-block;


					&:last-child {
						margin-right: 130rpx;
					}

					.box {
						width: 100%;
						height: 100%;

						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.CZprice {
							font-size: 48rpx;
							font-weight: bold;
							color: #181818;
						}


						.sendPri {
							font-size: 28rpx;
							color: #666666;
							margin-top: 10rpx;
						}
					}

				}

				.activeitembox {
					background-color: #fff2be;
					border: solid 2rpx #fbc901;
				}

			}
		}

要注意scroll-view标签宽度不能为100%，必须是rpx这种具体单位
其子元素必须设置display: inline-block;

记录一下坑，如有错误请指正，谢谢