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

cv高级工程师YKY2025-03-12 10:19

微信开放平台 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;

html 复制代码

<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平均分配所有空间无法实现超出部分滚动）效果如下：