微信小程序之scroll-view的flex佈局問題

關於微信小程序的scroll-view組件，第一次寫的時候是直接在scroll-view中用了一層容器包裹子元素，然後用了flex佈局，並且是用了組件來實現的橫向滾動，後面有提出改進，但是不記錄下，就發現過了幾天，就有點懵了

1.效果圖

2.在scroll-view里加一層容器，使用flex佈局實現

這裏用flex佈局實現的話，就要用組件的形式

• wxss文件

.scrollView{
  padding: 0 20rpx;
  white-space: nowrap;
  box-sizing: border-box;
}
.item{
  display: inline-block;
  margin-right: 20rpx;
  width: calc(100% / 3);
  height: 100rpx;
  background: #ff00ff;
}

.scrollView1{
  display: flex;
  margin-top: 40rpx;
  padding: 0 20rpx;
  width: 100%;
  flex-wrap: nowrap;
  box-sizing: border-box;
}
.item1{
  margin-right: 20rpx;
  width: calc(100% / 3);
  height: 100rpx;
  background: #ff00ff;
}
.scrollView2{
  margin-top: 40rpx;
  padding: 0 20rpx;
  width: 100%;
  box-sizing: border-box;
}
.itemContainer{
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
}
.scrollItem{
  margin-right: 20rpx;
}

.scrollView3{
  margin-top: 40rpx;
  padding: 0 20rpx;
  width: 100%;
  box-sizing: border-box;
}
.item3{
  margin-right: 20rpx;
  /* width: calc(100% / 3); */
  width: 240rpx;
  height: 100rpx;
  background: #aa22dd;
}

• wxml文件

<!-- 要想使用flex佈局實現橫向滾動，就要在scroll-view里加一層容器包裹，並且使用子組件纔會出現滾動效果 -->
<scroll-view scroll-x class="scrollView2">
  <view class="itemContainer">
    <block wx:for="{{4}}" wx:key="{{index}}">
      <view-item class="scrollItem" />
    </block>
  </view>
</scroll-view>

• 子組件裏就一個view標籤，可以自己直接寫

3.直接使用display：inline-block

• wxml文件

<scroll-view scroll-x class="scrollView">
  <block wx:for="{{4}}" wx:key="{{index}}">
    <view class="item"></view>
  </block>
</scroll-view>

4.自己的理解

• scroll-view不可以直接使用flex佈局，使用flex佈局會使得他不會按照預想的那樣橫向排列、滾動
• 要使用flex佈局則要麻煩一點
• 如果直接使用flex佈局，不用子組件的話，則會被擠成一排