微信小程序布局 头尾固定 中间包含横向和纵向滚动

使用 fixed 定位实现

效果

WXML

<!--index.wxml-->
<view class="container">
  <view class='head'>HEAD</view>
  <scroll-view class="body-h" scroll-x>
    <view id="green" class="item">1</view>
    <view id="red"  class="item">2</view>
    <view id="yellow" class="item">3</view>
    <view id="blue" class="item">4</view>
  </scroll-view>
  <scroll-view class='body-v' scroll-y >
      <view class="item">1</view>
      <view class="item">2</view>
      <view class="item">3</view>
      <view class="item">4</view>
      <view class="item">5</view>
      <view class="item">6</view>
      <view class="item">1</view>
      <view class="item">2</view>
      <view class="item">3</view>
      <view class="item">4</view>
      <view class="item">5</view>
      <view class="item">6</view>
  </scroll-view>
  <view class="footer">FOOTER</view>
</view>

WXSS 

.container {
  background-color: #fff;  
  color: #939393; 
}

.head{
  z-index: 1;
  position: fixed;
  top: 0rpx;
  width:100%;
  height:100rpx;
  color:#fff;
  background-color: cornflowerblue;
  text-align: center;
}

.body-h{
  position: fixed;
  top: 100rpx;
  white-space: nowrap; 
}
.body-h .item{
  display: inline-block;
  width: 600rpx;
  height: 200rpx;
  background-color: red;
  margin: 20rpx;
  box-sizing:border-box;
}


.body-v{
  position: fixed;
  z-index: -1;
  top:300rpx;
  bottom:100rpx;
}

.body-v .item{
  height: 300rpx;
  background-color: green;
  margin: 15rpx;
}

.footer{
  z-index: 1;
  position: fixed;
  bottom: 0rpx;
  width:100%;
  height:100rpx;
  color:#fff;
  background-color: cornflowerblue;
  text-align: center;
}