微信小程序实现上下置顶中间滚动的效果

我们在写页面时，可能经常会碰到这样的页面结构，头部和尾部固定，中间自由滚动的效果，或者固定头部，剩余的部分根据内容来自由滚动。
刚刚毕业做项目，总是因为这个耽误不少时间，希望跟我一样的小伙伴，看完我写的这之后，能够让你更快的码代码哦。
那就来先说说小程序吧！

小程序实现

<view style="`display: flex;flex-direction: column;justify-content:space-between;height:100%`">
  <view style="border:1px solid red;">
    <span>head</span>
  </view>
  <view style="border:1px solid black;display:flex;flex:1" class="middle">
    <scroll-view style="height:200px" scroll-y="true">
      <view style="width:100px;height:100px;border:1px solid red;">内容一</view>
      <view style="width:100px;height:100px;border:1px solid red;">内容二</view>
    </scroll-view>
  </view>
  <view style="border:1px solid green;">
    <span>foot</span>
  </view>
</view>

1.把包裹所有元素的最外层那个view甚至为弹性布局

display: flex;
flex-direction: column;
justify-content:space-between;
height:100%；

最重要的要把高度设置为100%

2.把需要滚动的区域同样设置成弹性布局

display:flex;
flex:1；

3.中间部分实现滚动
那肯定需要借助scroll-view ，把scroll-view 的滚动的高度设置，和滚动的方向设置好，就可以实现我们想要的效果拉

那如果想动态获取中间这部分的高度时，就可以在js中的onshow函数上

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    let query = wx.createSelectorQuery();
    query.select('.middle').boundingClientRect(rect=>{
      let height = rect.height;
      console.log(height);
      this.setData({
        height:height
      })
    }).exec();
  },

然后把高度设置到scrollview和高度上就可以
你敲到这，会问怎么没有效果，那最重要的是把

page页面的高度也要设置为100%