微信小程序开发——scroll-view横向滑动

<scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" >
<!--  display: inline-block-->
  <view style="background: red; width: 200px; height: 100px; display: inline-block" ></view>
  <view style="background: green; width: 200px; height: 100px; display: inline-block"></view>
  <view style="background: blue; width: 200px; height: 100px; display: inline-block"></view>
  <view style="background: yellow; width: 200px; height: 100px; display: inline-block"></view>
</scroll-view>

以上代码转自https://blog.csdn.net/u014360817/article/details/52658760

    在看了该博主的案例后，在自己原有代码的基础上进行了修改，不过并没有达到想要的效果。

    在正常情况下，使用flex-direction: row; 使得本想在同一行显示得数据进行换行，所以在使用横向滑动的时候，

首先要将滑动容器设定为white-space: nowrap;（不换行），这样数据才会在同一行显示，以此变为可滑动的操作。