小程序 scroll-view组件使用scroll-x + flex布局子元素无法横向显示问题

今天也是爱大大的一天吖

已于 2022-08-08 09:09:30 修改

阅读量1.3k

点赞数

分类专栏：小程序文章标签：小程序 javascript 前端

于 2022-08-06 23:21:39 首次发布

本文链接：https://blog.csdn.net/qq_45560350/article/details/126202376

版权

小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

问题表现

在学习小程序的view和scroll-view组件时，给view和scroll-view设置相同的样式，只有view内的子元素可以横向展示，scroll-view内的子元素始终是纵向的

wxml

<!-- view组件 -->
<view class="container1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

<!-- scroll-view组件 -->
<scroll-view class="container1 scroll-container-x" scroll-x>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

wxss

.container1{
  display: flex;
  justify-content: space-around;
}
.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: lightblue;
}
.container1 view:nth-child(2){
  background-color: lightpink;
}
.container1 view:nth-child(3){
  background-color: lightsalmon;
}

在这里插入图片描述

问题原因

scroll-view组件中flex布局不生效

问题解决

解决办法一：通过设置属性让flex布局生效

在scroll-view上添加enable-flex属性
<scroll-view class="container1 scroll-container-x" scroll-x enable-flex>
在这里插入图片描述
后续设置scroll-view的width实现scroll-x效果时，还会遇到一个问题：当设置的scroll-view宽度小于子元素宽度之和，子元素还是会纵向显示，这个问题在下面的方法中有说到，直接跳到➡处

解决办法二：硬改呗当作没用flex布局来改

子元素纵向展示是因为view是块元素，自占一行，故view设置display:inline-block
在这里插入图片描述
可以横向展示

➡为了实现scroll-x效果，设置scroll-view设置width:100px
在这里插入图片描述
哦又变成纵向的了因为宽度不够默认会换行哇给scroll-view加white-space:nowrap

完整代码

wxml

<!-- view组件 -->
<view class="container1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

<!-- scroll-view组件 -->
<scroll-view class="container1 scroll-container-x" scroll-x>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

wxss

.container1{
  display: flex;
  justify-content: space-around;
}
.container1 view{
  width: 100px;
  height: 100px;
  display: inline-block;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: lightblue;
}
.container1 view:nth-child(2){
  background-color: lightpink;
}
.container1 view:nth-child(3){
  background-color: lightsalmon;
}
.scroll-container-x{
  width: 120px;
  white-space: nowrap;
}