小程序使用 scroll-view 组件 坑

• wxml

<view class="czCard">
			<scroll-view class="cardList" scroll-x>
				<view class="itembox" wx:for="{{8}}" >
					<view class="box">
						{{index}}
					</view>
				</view>
			</scroll-view>
</view>

• wxss

 .czCard .cardList {
   width: 100%;
   height: 200rpx;
   white-space: nowrap;
 
 }
 .czCard .cardList .itembox {
   width: 200rpx;
   height: 200rpx;
   margin-right: 24rpx;
   background-color: #ffffff;
   border-radius: 20rpx;
   border: solid 2rpx #eaeaea;
   display: inline-block;
 }
 /* .czCard .cardList .itembox:last-child {
   margin-right: 130rpx;
 } */
 .czCard .cardList .itembox .box {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }

注意：

• scroll-view 一定要给 scroll-view 添加高度

• scroll-view 外面需要包一层view 标签

• scroll-view设置scroll-x ,white-space: nowrap;

• 子元素设置display: inline-block；

• 内部元素内容宽度超出scroll-view的宽

• scroll-view不支持flex，默认block；
  当子元素的宽度总合大于 父元素宽度 子元素压缩自己 以适应 父元素的宽度