微信小程序之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佈局，不用子組件的話，則會被擠成一排

正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）

• 往期好文推薦：

  • 判斷iOS和Android及PC端
  • 純css實現瀑布流（multi-column多列及flex佈局）
  • 實現單行及多行文字超出後加省略號
  • 微信小程序之購物車和父子組件傳值及calc的注意事項