收藏
回答

scroll-view内部元素开启flex布局并且支持换行后无法滚动?

已提供代码片段

需求是一个scroll-view内部嵌套left和right两个子元素view,左边宽度固定,右边view内部开启flex布局并且允许换行。预期是scroll-view整体可以左右滚动,并且右边的item布局是两行,一行五个。效果未达到预期。

<scroll-view class="scroll-area" type="list" scroll-x enable-flex>
  <view class="left"></view>
  <view class="right">
  <view class="right-item" wx:for="{{10}}">
  1
  </view>
  </view>
</scroll-view>

.scroll-area{

  height: 360rpx;

  background-color: #eee;

  display: flex;

  flex-direction: row;

  padding: 10rpx;

}

.left {

  width: 240rpx;

  height: 360rpx;

  background-color: aqua;

  flex-shrink: 0;

}

.right{

  background: skyblue;

  margin-left: 10rpx;

  display: flex;

   flex-wrap: wrap; 

  width: 1550rpx;


}

.right-item {

  margin: 5rpx;

  flex-shrink: 0;

  background-color: orange;

  width: 280rpx;

  height: 165rpx;

}



回答关注问题邀请回答
收藏
登录 后发表内容