微信小程序scroll-x失效的完美解决方法

 <!-- 横向滚动商品 -->  <scroll-view class='scroll-box' scroll-x >   <view class='box'>    <view class='box-hd'>     <image src='https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=3ab7c3c9c4fcc3ceabc0cf33a244d6b7/cefc1e178a82b90137378cd87f8da9773812ef47.jpg'></image>     <view class='info'>      <view class='name'>jed_shi</view>      <view class='time'>剩余09:43:21</view>     </view>    </view>    <view class='box-img'>     <image src='https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=d369d78d98eef01f52141ec5d0fc99e0/c2fdfc039245d688b3d9dc4da8c27d1ed31b247b.jpg'></image>    </view>    <view class='box-extra'>     <text class='price'>￥321</text>     <button>加入</button>    </view>   </view>   <view class='box'>    <view class='box-hd'>     <image src='https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=3ab7c3c9c4fcc3ceabc0cf33a244d6b7/cefc1e178a82b90137378cd87f8da9773812ef47.jpg'></image>     <view class='info'>      <view class='name'>jed_shi</view>      <view class='time'>剩余09:43:21</view>     </view>    </view>    <view class='box-img'>     <image src='https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=d369d78d98eef01f52141ec5d0fc99e0/c2fdfc039245d688b3d9dc4da8c27d1ed31b247b.jpg'></image>    </view>    <view class='box-extra'>     <text class='price'>￥321</text>     <button>加入</button>    </view>   </view>   <view class='box'>    <view class='box-hd'>     <image src='https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=3ab7c3c9c4fcc3ceabc0cf33a244d6b7/cefc1e178a82b90137378cd87f8da9773812ef47.jpg'></image>     <view class='info'>      <view class='name'>jed_shi</view>      <view class='time'>剩余09:43:21</view>     </view>    </view>    <view class='box-img'>     <image src='https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=d369d78d98eef01f52141ec5d0fc99e0/c2fdfc039245d688b3d9dc4da8c27d1ed31b247b.jpg'></image>    </view>    <view class='box-extra'>     <text class='price'>￥321</text>     <button>加入</button>    </view>   </view>   <view class='box'>    <view class='box-hd'>     <image src='https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=3ab7c3c9c4fcc3ceabc0cf33a244d6b7/cefc1e178a82b90137378cd87f8da9773812ef47.jpg'></image>     <view class='info'>      <view class='name'>jed_shi</view>      <view class='time'>剩余09:43:21</view>     </view>    </view>    <view class='box-img'>     <image src='https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=d369d78d98eef01f52141ec5d0fc99e0/c2fdfc039245d688b3d9dc4da8c27d1ed31b247b.jpg'></image>    </view>    <view class='box-extra'>     <text class='price'>￥321</text>     <button>加入</button>    </view>   </view>  </scroll-view> .scroll-box { margin-top: 33rpx; padding-bottom: 40rpx;}.scroll-box .box:first-child { margin-left: 32rpx;}.scroll-box .box { width: 296rpx; margin-right: 32rpx;}.scroll-box .box .box-hd { display: flex; align-items: center;}.scroll-box .box .box-hd image { width: 64rpx; height: 64rpx; border-radius: 50%; margin-right: 15rpx;}.scroll-box .box .box-hd .info { display: flex; flex-direction: column;}.scroll-box .box .box-hd .info .name { font-size: 28rpx; color: #333; line-height: 1; padding-bottom: 10rpx;}.scroll-box .box .box-hd .info .time { font-size: 22rpx; color: #999; line-height: 1;}.scroll-box .box .box-img { margin-top: 16rpx;}.scroll-box .box .box-img image { width: 296rpx; height: 222rpx; border-radius: 15rpx;}.scroll-box .box .box-extra { display: flex; justify-content: space-between;}.scroll-box .box .box-extra .price { font-size: 32rpx; color: #f15733;}.scroll-box .box .box-extra button { width: 104rpx; height: 44rpx; background-color: #f15733; color: #fff; margin: 0; padding: 0; font-size: 26rpx; line-height: 44rpx; margin-right: 8rpx;}

.scroll-box {white-space: nowrap;}.scroll-box .box{display:inline-block}

.scroll-box {white-space: nowrap;}