微信小程序实现头部底部固定中间列表滑动

描述

微信小程序实现头部，底部固定中间列表滑动，经常会遇到这样的问题，底部一行被按钮遮住看不见，怎么样实现才让中间内容全部展示呢

实现方法

父布局相对并撑满，中间滑动区域需要套一个scroll-view为了可以中间滑动并设置绝对属性，上下左右属性都设置为0，具体显示列表高度自适应，这样就可以撑满整个屏幕而且不会被底部按钮遮挡了，直接上示例代码。

代码示例

xml代码：

<view class="pageview">
  <view class="container">
    <scroll-view class="main-scroll" scroll-y>
      <view class="list-view" wx:for="{{items}}" wx:for-item="it">
       <!--列表显示具体布局!-->
      </view>
    </scroll-view>
  </view>
  <view hidden="{{isHiden}}" class="btn-area">
    <button id="post" bindtap="click" data-status="confirm" formType="submit" type="primary">确定</button>
    <button id="last" bindtap="click" data-status="cancel" formType="submit" type="primary">取消</button>
  </view>
</view>

css代码：

.pageview {
  flex-direction: column;
  display: flex;
  width: 100%;
  height: 100%;
}

.container {
  flex: 1;
  padding: 24rpx 32rpx;
  position: relative;
  background-color: white;
}

.list-view {
  margin-left: 32rpx;
  margin-right: 32rpx;
  flex: 1;
  height: auto;
}

.main-scroll {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
}

.btn-area {
  height: 160rpx;
  display: flex;
  background-color:white;
}

.btn-area #last {
  border-radius: 4px;
  border: 1px solid #3988FE;
  color: #3988FE;
  align-self: center;
  margin-left: 24rpx;
}

.btn-area #post {
  border-radius: 4px;
  background-color: #3988FE;
  color: white;
  align-self: center;
  margin-left: 24rpx;
  margin-right: 24rpx;
}