uni-app scroll-view横向滚动注意

image.png

<scroll-view class="xsms-scroll" scroll-x="true">
    <view v-for="(item, index) in homeSeckill.seckillList" class="xsms-item">
        <image :src="item.productMainImgUrl"></image>
        <view>¥{{item.seckillPrice}}</view>
    </view>
</scroll-view>

.xsms-scroll{
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.xsms-item{
    display: inline-block;
    text-align: center;
    margin-left: 10px;
    margin-top: 9px;
    color: #EB2C3E;
    font-size: 14px;
    font-weight: 600;
}

scroll-view重要的三个属性scroll-x="true";overflow: hidden;white-space: nowrap;
scroll-view中的item的主要属性display: inline-block;