微信小程序 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内的内容.