记录微信小程序scroll-view的一次问题

问题描述

通过微信小程序的视图容器scroll-view实现内容横向滚动、

使用flex布局之后想要实现横向排列，但是无法达到效果，是因为没有启用flexbox布局

再添加scroll-x属性，可以实现横向滚动

<scroll-view class="recommendScroll" enable-flex scroll-x>
  <view class="item" wx:for="{{recommendList}}" wx:key="id">
    <image src="{{item.picUrl}}"></image>
    <text>{{item.name}}</text>
  </view>
</scroll-view>

但是并没有达到预期效果，发现整个滚动区域的高度比内容高度大的多，是因为横向排列之后，区域高度仍然是纵向高度

解决方法

手动为滚动区域添加高度可以解决问题