微信小程序 scroll-view 中使用flex佈局

scroll-view

小程序中爲了可滾動視圖區域要得使用scroll-view，但scroll-view有致命的缺陷，就是不支持flex佈局。但我們可以通過使用view來包裹scroll-view的方法來使用flex佈局.
下面直接上代碼:

<view class="body">
  <view class='head'>head</view>
  <view class='list-wraper'>
    <scroll-view class="list" scroll-y="true">
      <view class="list-inner">
        <view class='course-card'>
          <view>
            <image src="../../img/next-course.png" mode='widthFix'></image>
          </view>
          <view>人人都會小程序</view>
          <view class='price'>免費</view>
        </view>
        <view class='course-card'>
          <view>
            <image src="../../img/next-course.png" mode='widthFix'></image>
          </view>
          <view>人人都會小程序</view>
          <view class='price'>免費</view>
        </view>
        <view class='course-card'>
          <view>
            <image src="../../img/next-course.png" mode='widthFix'></image>
          </view>
          <view>人人都會小程序</view>
          <view class='price'>免費</view>
        </view>
        <view class='course-card'>
          <view>
            <image src="../../img/next-course.png" mode='widthFix'></image>
          </view>
          <view>人人都會小程序</view>
          <view class='price'>免費</view>
        </view>
        <view class='course-card'>
          <view>
            <image src="../../img/next-course.png" mode='widthFix'></image>
          </view>
          <view>人人都會小程序</view>
          <view class='price'>免費</view>
        </view>
        <view class='course-card'>
          <view>
            <image src="../../img/next-course.png" mode='widthFix'></image>
          </view>
          <view>人人都會小程序</view>
          <view class='price'>免費</view>
        </view>
        <view class='course-card'>
          <view>
            <image src="../../img/next-course.png" mode='widthFix'></image>
          </view>
          <view>人人都會小程序</view>
          <view class='price'>免費</view>
        </view>
        <view class='course-card'>
          <view>
            <image src="../../img/next-course.png" mode='widthFix'></image>
          </view>
          <view>人人都會小程序</view>
          <view class='price'>免費</view>
        </view>
        <view class='course-card'>
          <view>
            <image src="../../img/next-course.png" mode='widthFix'></image>
          </view>
          <view>人人都會小程序</view>
          <view class='price'>免費</view>
        </view>
        <view class='course-card'>
          <view>
            <image src="../../img/next-course.png" mode='widthFix'></image>
          </view>
          <view>人人都會小程序</view>
          <view class='price'>免費</view>
        </view>
      </view>
    </scroll-view>
  </view>

  <view class="bottom">
    <view class="guide-item">
      <view>
        <image src="../../img/index.png" mode="widthFix"></image>
      </view>
      <view class="text">首頁</view>
    </view>
    
    <view class="guide-item">
      <view>
        <image src="../../img/sort.png" mode="widthFix"></image>
      </view>
      <view>分類</view>
    </view>
   
    <view class="guide-item">
      <view><image src="../../img/cal.png" mode="widthFix"></image></view>
      <view>課程表</view>
  </view>
  
  <view class="guide-item">
      <view><image src="../../img/head.png" mode="widthFix"></image></view>
      <view>我的</view>
  </view>
  </view>
</view>

.head,.bottom{
  background-color: #ddd;
  width: 100%;
}
.body{
  height: 100vh;
  display:flex;
  flex-direction: column;
}
.list{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.list-wraper{
  flex-grow: 1;
  position:relative;
}
.list-inner{
 display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
}
.course-card{
  margin-top: 10px;
  width:46vw;
  margin-left: 2vw;
  margin-right: 2vw;
}
.course-card image{
  width:100%;
  border-radius: 5px;
}
.price{
  color:blue;
}

.bottom{
  display: flex;
  justify-content: space-around;
  background-color: white;
}

.guide-item{
  padding: 10px;
  font-size: 12px;
  line-height: 1;
  padding-top: 10px;
  padding-bottom: 10px;
}
.guide-item image{
  width:34px;
}
.text{
  margin-left:5px;
}

效果圖如下:

這裏滾動區域用到了flex佈局，首先整個滾動區域在這個body區域內是flex佈局的，而且那些每一個小卡片(人人都會小程序)這些也在scroll-view區域內是flex佈局的。
現在看代碼結構；

scroll-view被上面的class="list-wraper"的view裹住，因爲scroll-view區域在整個body區域內是一個flex-item，並且scroll-view不支持flex佈局，必須得用view來裹住.
而對於scroll-view內的view，也是因爲同樣的原因，因爲scroll-view內的那些課程信息每一個是一個flex-item,必須使用felx來佈局，因此得使用view來裹住scroll-view內的內容.