问题描述
通过微信小程序的视图容器scroll-view实现内容横向滚动、
使用flex布局之后想要实现横向排列,但是无法达到效果,是因为没有启用flexbox布局
enable-flex | boolean | 启用 flexbox 布局。开启后,当前节点声明了 display: flex 就会成为 flex container,并作用于其子节点。 |
---|---|---|
再添加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>
但是并没有达到预期效果,发现整个滚动区域的高度比内容高度大的多,是因为横向排列之后,区域高度仍然是纵向高度
解决方法
手动为滚动区域添加高度可以解决问题
文章评论