uniapp小程序实现上下固定中间滑动布局

<template>
  <view class="container">
    <view class="top-fixed">顶部固定区域</view>
    <scroll-view scroll-y="true" class="middle-scrollable">
      <view v-for="(item, index) in 30" :key="index">{{ item }}条数据</view>
    </scroll-view>
    <view class="bottom-fixed">底部固定区域</view>
  </view>
</template>
 
<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.top-fixed {
  height: 50px; /* 根据实际需求设置固定区域的高度 */
  background-color: #f0f0f0;
}
.middle-scrollable {
  flex: 1;
  background-color: #f8f8f8;
}
.bottom-fixed {
  height: 50px; /* 根据实际需求设置固定区域的高度 */
  background-color: #f0f0f0;
}
</style>

这段代码实现了一个简单的上下固定中间滑动的布局。顶部是一个固定高度的区域，底部也是一个固定高度的区域，中间是可以滚动的区域。通过使用Flexbox布局，并将scroll-view的scroll-y属性设置为true，实现了垂直滚动。这是一个常用的页面布局技巧，适用于多数需要固定头部和底部，并且中间内容区域可以滚动的场景。