微信小程序开发 scroll-view enable-flex失效的解决方法

最新推荐文章于 2026-04-19 15:59:59 发布

原创最新推荐文章于 2026-04-19 15:59:59 发布 · 3.1k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#小程序

本文介绍了两种方法在微信小程序中使用<scroll-view>实现子元素水平滚动，并设置子元素间距。方法一是通过white-space:nowrap和display:inline-block，但margin属性失效；方法二是启用flex布局，通过在<scroll-view>内添加一个view并设置display:flex，此时margin属性生效。这两种方法可以帮助开发者解决微信小程序中水平滚动和元素间距的问题。

方法1：

在外盒子<scroll-view>使用white-space: nowrap来禁止子盒子换行，需要将子盒子设置为行内块级元素display: inline-block，这个方法无法设置子盒子之间的间距 margin属性会失效

页面结构（.wxml）

<!-- 内容区 -->
    <scroll-view class="recommendScroll" scroll-x>
        <view class="scollItem">
          <image src="" alt=""></image>
          <text></text>
        </view>
        <view class="scollItem">
          <image src="" alt=""></image>
          <text></text>
        </view>
    </scroll-view>

样式(.wxss)

/* 推荐内容区 */
.recommendScroll {
  white-space: nowrap;
  margin: 20rpx 0;
}
.scollItem {
  display: inline-block; 
  width: 200rpx;
  height: 300rpx;
  margin-right: 20rpx;/*无效*/
}

方法2：

官方文档中介绍enable-flex用于启用 flexbox 布局，开启后当前节点声明了 display: flex 就会成为 flex container。但是直接设置外盒子<scroll-view>的样式为display无法到达预期效果，此时只需要在子盒子外层包裹一个view，在该view上设置display: flex 就可以了

页面结构（.wxml）

<!-- 内容区 -->
    <scroll-view class="recommendScroll" scroll-x enable-flex>
      <view class="scrollview" >
        <view class="scollItem">
          <image src="" alt=""></image>
          <text></text>
        </view>
        <view class="scollItem">
          <image src="" alt=""></image>
          <text></text>
        </view>
      </view> 
    </scroll-view>

样式(.wxss)

/* 推荐内容区 */
.recommendScroll {
  margin: 20rpx 0;
}
.scrollview {
  display: flex;
}
.scollItem {
  width: 200rpx;
  height: 300rpx;
  margin-right: 20rpx;/*有效*/
}

Reference