前端 - uniapp - - 滚动容器scroll-view实现横向滚动

微信开放平台 scrol-view 的官方文档说明https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

scrollview相当于给div加上了overflow-x: auto; 属性 想要实现横线滚动 官方文档有说明需要配置scroll-x和enable-flex为true 并其需要给高度和flex-direction:true的样式，但是我在使用时发现按照官方文档说明给了配置后 依然无法实现滚动效果 在一行中放不开的dom会被挤到下一行 所以我们要再给一个强制不换行的样式white-space: nowrap;

<scroll-view 
  style="height: 250rpx;flex-direction: row;white-space: nowrap;" 
  scroll-x 
  enable-flex
>
    <div 
      v-for="ele in item.children" 
      :key="ele.name" 
      style="display: inline-block;" 
      class="scroll-item">
        <!--内容-->
    </div>
</scroll-view>

因为div/view是块元素 所以为了让dom都在同一行 我给强制转为行内元素（此处不能给scroll-view display:flex的样式 否则会使div平均分配所有空间 无法实现超出部分滚动）效果如下：