小程序原生完美头部底部列表滚动

.wxml

<view class="head">头部</view>
<view class="newList-wrap">
	<scroll-view scroll-y="true" class="newList-scroll-view">
		<view class="newList">
			<view class="newItem">
				<image mode="widthFix" class="newImg" src="../../assets/img/new01.jpg"></image>
				<text class="newdesc">五一过后，济南绿化带的麦子"丰收"啦！</text>
				<view class="price">免费</view>
			</view>
			<view class="newItem">
				<image mode="widthFix" class="newImg" src="../../assets/img/new02.jpg"></image>
				<text class="newdesc">高三学生用休闲体育和心理</text>
				<view class="price">免费</view>
			</view>
			<view class="newItem">
				<image mode="widthFix" class="newImg" src="../../assets/img/new03.jpg"></image>
				<text class="newdesc">6亿人的“超级大脑”</text>
				<view class="price">￥30.00</view>
			</view>
			<view class="newItem">
				<image mode="widthFix" class="newImg" src="../../assets/img/new04.jpg"></image>
				<text class="newdesc">政府将搬迁至先行区消息不实</text>
			</view>
			<view class="newItem">
				<image mode="widthFix" class="newImg" src="../../assets/img/new05.jpg"></image>
				<text class="newdesc">今年商河公路网还将发生大</text>
			</view>
		</view>
	</scroll-view>
</view>
<view class="bottom">底部</view>

.wxss

/**index.wxss**/
Page{
 width: 100%;
 height: 100vh;
 display: flex;
 flex-direction: column;
}

.head,.bottom{ 
  background-color: #eee;
}
.newList-wrap{
  flex-grow: 1;
  position: relative;
}
.newList-scroll-view{    /**不支持flex**/
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.newList{
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  align-content: flex-start;
  justify-content: space-between;
  margin:0 2vw;
}
.newItem{
  width: 47vw;    /**47 * 2 =94*/
  margin:20rpx 0;
}
.newItem image{
  width: 100%;
  border-radius:30rpx
}
.newItem .price{
  color: green;
}

知识点： flex布局，flex-wrap:wrap //从左到右多行 ，flex-direction:row // 行是水平排列 。  最外层的page行排列方式是从上到下。中间的flex 布局要撑满 flex-grow:1 。高度100vh单位高度充满 。vw单位方便计算 。例如50vm 等于50%；

scroll-view  滚动view 不支持flex ，给这个组件加纵向滚动，scroll-y="true"， 外面包裹view 设置相对定位 ，并且flex-grow:1，容器高度充满。scroll-view设置样式 ，绝对定位上下左右设为0