uni-app 头部底部固定 中间滚动

UniApp实现头部和底部固定的中间区域滚动功能可以通过布局组件来实现。你可以使用`StackLayout`或者`Flex`布局配合`ScrollView`。这里是一个基本示例：

1. 创建一个`StackLayout`作为容器，设置顶部和底部的`position`属性为`fixed`，高度分别为屏幕的高度减去顶部和底部的间距（比如导航栏和底部标签栏的高度）：

<template>
  <view class="container">
    <!-- 这里可以添加顶部导航栏 -->
    <view class="top-bar" fixed>...</view>

    <!-- 使用ScrollView包裹中间可滚动内容 -->
    <scroll-view class="scroll-view" scroll-y>
      <!-- 内容区域 -->
      <view class="content">...</view>
    </scroll-view>

    <!-- 底部固定布局 -->
    <view class="bottom-bar" fixed>...</view>
  </view>
</template>

2. CSS样式定义：

.container {
  display: flex;
  height: 100%; /* 或者根据实际页面高度 */
}

.top-bar {
  position: fixed;
  top: 0;
  width: 100%;
  // 设置顶部导航栏高度
  height: 64px; /* 根据实际情况调整 */
}

.scroll-view {
  flex: 1; /* 分配剩余空间给滚动视图 */
}

.content {
  padding-top: 64px; /* 同样，这里是顶部导航栏高度 */
  // 其他样式...
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 44px; /* 底部标签栏高度 */
}