微信小程序组件scroll-view无法横向滚动问题

当我们使用scroll-view组件的时候，通常按文档上的说明进行操作，也就是将scroll-x="true"来设置允许横向滚动的时候，其实只设置这里还是不够的。此时我们打开调试器查看会发现组件的子元素并没有在一行显示，而是自动换行了，此时即使是将父元素的宽度加大，也是一样无法进行横向滚动。解决的办法就是将父元素容器的display设为flex弹性布局，然后设置不允许换行white-space：nowrap；这样问题就解决了。下面贴上代码

<scroll-view class='top100content' scroll-x="true">
    <view class="top100item"></view>
</scroll-view>

.top100content {
  width: 100%;
  height: 470rpx;
  display: flex;
  white-space: nowrap;
}


.top100item{
  width: 300rpx;
  height: 470rpx;
  box-sizing: border-box;
  margin: 0 20rpx;
  display: inline-block;
}