uni-app 写一个竖向布局 上面是搜索框 下面是scroll-view ，scroll-view沾满剩余高度 并且滚动时 搜索框不跟随滚动

在uni-app中创建一个具有垂直布局，搜索框位于顶部，`scroll-view`占据剩余空间并独立于搜索框滚动的效果，你可以按照以下步骤实现：

1. **设置页面结构**[^1]:
使用`<view>`标签作为主容器，并在其中创建两个子元素：搜索框（如`<input type="search" />`）和`scroll-view`。

<template>
  <view class="container">
    <view class="search-bar">
      <!-- 搜索框组件 -->
      <input placeholder="Search..." />
    </view>
    <scroll-view class="scroll-view" scroll-y>
      <!-- 新闻列表或其他内容 -->
      <view v-for="item in newsItems" :key="item.id"></view>
    </scroll-view>
  </view>
</template>

2. **样式设计**:
使用CSS来定义布局和滚动行为。给`.container`添加垂直方向的Flex布局，使搜索框位于顶部，而`.scroll-view`占据剩余空间。

.container {
  display: flex;
  flex-direction: column;
}

.search-bar {
  position: sticky; /* 使搜索框固定在顶部 */
  top: 0;
  padding-bottom: 20px; /* 与scroll-view留空距离 */
}

.scroll-view {
  flex: 1; /* 滚动视图充满剩余空间 */
  overflow-y: auto;
}

3. **初始化数据和事件处理**[^2]:
初始化`newsItems`数据并在滚动事件中保持搜索框静止。

data() {
  return {
    newsItems: [], // 假设这是从API获取的新闻列表
  };
},
mounted() {
  // 初始化数据...
},
methods: {
  onScroll(e) {
    this.$refs.searchBar.style.position = 'relative'; // 当滚动时取消搜索框的sticky定位
    e.preventDefault(); // 阻止默认滚动行为
  },
  onScrollEnd(e) {
    this.$refs.searchBar.style.position = 'sticky'; // 滚动结束后恢复定位
  },
}

在`<input>`上绑定ref属性，以便在方法中操作：

<input ref="searchBar" type="search" placeholder="Search..." />

这样，当你滚动`scroll-view`时，搜索框会始终保持在顶部，直到滚动结束才恢复到固定的顶部位置。