uni-app 固定头部高度10rpx scroll-view 在scc中怎么设置剩余高度

在uni-app中，要实现固定头部高度并让`scroll-view`在SingleChildScrollView (scc) 中适应剩余空间，你可以这样做：

1. 设置固定的头部高度（这里以10rpx为例）[^1]：

.swiper {
    /* 添加头部固定高度 */
    padding-top: 10rpx;
}

这样，`swiper`区域会从顶部开始滚动，留下10rpx的空间作为头部。

2. 让`scroll-view`适应剩余高度：

<scroll-view class="content-scroll" bindscrolltolower="onScrollToLower">
    <!-- 这里放你的内容 -->
</scroll-view>

在对应的js文件中添加`onScrollToLower`事件处理函数，用于计算剩余高度并在底部添加滚动监听：

Page({
  data: {
    // 其他数据...
  },
  onScrollToLower(e) {
    const scrollView = this.selectComponent('#content-scroll');
    const scrollTop = scrollView.scrollTop;
    const scrollHeight = scrollView.scrollHeight;
    const clientHeight = scrollView.clientHeight;

    // 当滚动到底部时，计算剩余高度
    if (scrollTop + clientHeight === scrollHeight) {
      // 获取键盘高度变化后的实际剩余高度
      const keyboardHeight = uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().windowHeight - e.height;
      let remainingHeight = Math.max(keyboardHeight, 0) - 2 + 'px'; // 减去2px是为了留出一些缓冲

      // 更新style 或者动态修改元素的高度
      scrollView.style.height = `${remainingHeight}`;
    }
  }
})

在这个例子中，当用户滚动到`scroll-view`底部时，会检查是否有键盘弹出并相应调整`scroll-view`的高度。