scroll-view踩坑记录

要求每个盒子可以手动进行横向拖动，类似bilibili顶部菜单栏，但是在scroll-view设置了scroll-x没有生效，在css中给scroll-view设置了display：flex还是没有生效
第一次编写的代码
WXML

<view> 
  <scroll-view scroll-x class="wrap_box">
    <view class="wrap">
      <view class="box">1</view>
      <view class="box">1</view>
      <view class="box">1</view>
      <view class="box">1</view>
      <view class="box">1</view>
    </view>
  </scroll-view>
</view>

WXSS

.wrap_box{
  display: flex;
}
.box{
  height: 50px;
  width: 50px;
  background-color: red;
  margin-right: 10px;
}

执行以后依旧是垂直排列，没有达到理想的效果
通过查找，发现scroll-view默认是block，并在Scroll-View 组件的scroll-x属性不起作用找到了解决办法，只要把scroll-view设置white-space：nowrape，内部需要拖动的元素设置为inline-block即可

.wrap_box{
  white-space: nowrap;
}
.box{
  display: inline-block;
  height: 50px;
  width: 50px;
  background-color: red;
  margin-right: 10px;
}

总结：
需要给scroll-view设置white-space：nowrap
内部需要拖动的子元素设置inline-block