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

方法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