scroll-view使用display:flex无效，可采用另外一种方法实现横向滑动

最新推荐文章于 2025-04-08 15:28:06 发布

焦妮敲代码

最新推荐文章于 2025-04-08 15:28:06 发布

阅读量3.1k

点赞数 5

分类专栏： # 小程序问题记录文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/qq_45890970/article/details/124728719

版权

问题记录同时被 2 个专栏收录

13 篇文章

订阅专栏

小程序

7 篇文章

订阅专栏

在学习小程序开发时，遇到scroll-view横向滚动的实现。初始尝试通过设置scroll-y和父盒子高度未达到预期效果，因为scroll-view的display:flex无效。解决方案是将view组件的display设置为inline-block，并在容器上添加white-space:nowrap属性，从而实现横向滚动的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在学小程序开发，试着用scroll-view进行横向滚动

竖向滚动很简单，只需要添加scroll-y吗，如何给父盒子添加height属性即可

WXML如下

<scroll-view class='container1' scroll-x> 
   <view>A</view>
   <view>B</view>
   <view>C</view>
</scroll-view>

WXSS如下

/* pages/list/list.wxss */
.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: lightgreen;
}

.container1 view:nth-child(2){
  background-color: lightpink ;
}
.container1 view:nth-child(3){
  background-color: lightskyblue;
}

.container1{
  display: flex;
  border: 1px solid red;
  height: 100px;
  width: 100px;
}

发现并没有效果。去掉高度，盒子是竖直排序的，并不在同一行。
在这里插入图片描述
百度查找后才发现scroll-view本身的display:flex不生效。若想实现效果，需要

给view组件设置：display: inline-block
给容器设置：white-space: nowrap;

/* pages/list/list.wxss */
.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  display: inline-block
}
.container1 view:nth-child(1){
  background-color: lightgreen;
}

.container1 view:nth-child(2){
  background-color: lightpink ;
}
.container1 view:nth-child(3){
  background-color: lightskyblue;
}

.container1{
  white-space: nowrap;
  border: 1px solid red;
  height: 100px;
  width: 100px;
}