uni-app scroll-view横向滚动的坑

    我爱模板网在用uni-app开发小程序时，需要用scroll-view做出如下效果的横向滚动（之前都是div套div的，外层的div宽度100%，overflow:hidde，scroll-y:auto，里面的div为display:flex，不换行，这样就能实现这种效果了），不过uni-app既然提供能这种效果，就没必要自己写了。


html代码如下（我就简写了）：

<scroll-view scroll-x="true" class="miaosha-list">
    <view class="miaosha-item">
        <image src="../../static/img/miaosha.png" mode="widthFix"></image>
        <view class="miaosha-price">
            <text class="red"><text>￥</text>9.9</text>
            <text class="gray">￥19.9</text>
        </view>
    </view>
    <view class="miaosha-item">
        <image src="../../static/img/miaosha.png" mode="widthFix"></image>
        <view class="miaosha-price">
            <text class="red"><text>￥</text>9.9</text>
            <text class="gray">￥19.9</text>
        </view>
    </view>
    <view class="miaosha-item">
        <image src="../../static/img/miaosha.png" mode="widthFix"></image>
        <view class="miaosha-price">
            <text class="red"><text>￥</text>9.9</text>
            <text class="gray">￥19.9</text>
        </view>
    </view>
    <view class="miaosha-item">
        <image src="../../static/img/miaosha.png" mode="widthFix"></image>
        <view class="miaosha-price">
            <text class="red"><text>￥</text>9.9</text>
            <text class="gray">￥19.9</text>
        </view>
    </view>
    <view class="miaosha-item">
        <image src="../../static/img/miaosha.png" mode="widthFix"></image>
        <view class="miaosha-price">
            <text class="red"><text>￥</text>9.9</text>
            <text class="gray">￥19.9</text>
        </view>
    </view>
    <view class="miaosha-item">
        <image src="../../static/img/miaosha.png" mode="widthFix"></image>
        <view class="miaosha-price">
            <text class="red"><text>￥</text>9.9</text>
            <text class="gray">￥19.9</text>
        </view>
    </view>
</scroll-view>

css代码：

.miaosha-list{width: 100%; height: 296rpx;}
.miaosha-item{width: 180rpx; padding-top:30rpx; margin:0 12rpx}
.miaosha-item image{width: 180rpx; height: 180rpx; margin-bottom: 10rpx; display: block;}
.miaosha-price .red{color: #F53730; font-size: 32rpx;}
.miaosha-price .red text{font-size: 24rpx; line-height: 24rpx;}
.miaosha-price .gray{color: #999; font-size: 24rpx;}

但是，效果却是如下：


我按照官网的做的，就是不行，后来在浏览器看了下，.miaosha-item占了一行，看来scroll-view并没有让子元素在一行，即使设置了scroll-x="true"也不行。于是，我就给.miaosha-item变成行内块状：

.miaosha-item{width: 180rpx; padding-top:30rpx; margin:0 12rpx; display:inline-block;}

展现的却是下面的效果：


的确在一行了，但是多余的还是掉下去了。没办法，我又给scroll-view强制不换行：

.miaosha-list{width: 100%; height: 296rpx; white-space: nowrap;}

总算实现了。但是官网我并没有找到，所以在这里记一下。


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！