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

要实现上述需求，在uni-app中创建一个竖向布局，上面是搜索框，下面是可滚动区域（scroll-view），并且搜索框固定不动，可以按照以下步骤进行：

1. **设置页面结构**[^1]:
在`.wxml`文件中，创建一个竖向布局（vertical layout）并定义搜索框和scroll-view组件的位置关系：

   <view class="container">
     <view class="search-bar">
       <!-- 搜索框组件 -->
       <input placeholder="请输入搜索关键词" />
     </view>
     <scroll-view class="scroll-view" scroll-y="true">
       <!-- 异步加载的数据将会填充在这里 -->
     </scroll-view>
   </view>

2. **样式设置**:
使用`.wxss`文件来控制布局样式：

   .container {
     display: flex;
     flex-direction: column; /* 垂直布局 */
   }

   .search-bar {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     height: 50px; /* 设置搜索框的高度 */
   }

   .scroll-view {
     padding-top: 50px; /* 添加搜索框高度，保证内容从下方开始 */
     flex-grow: 1; /* 滚动视图充满剩余空间 */
   }

3. **异步数据加载**:
在`data`属性中声明异步数据源，并在`onLoad`或`asyncData`生命周期钩子中请求数据：

   data: {
     asyncNewsData: [], // 初始化为空数组
   },
   
   onLoad() {
     this.getNewsData(); // 或者 asyncData()
   },
   
   getNewsData() {
     // 使用uni-app的API（如request或fetchJson）异步获取数据
     uni.request({
       url: 'your-api-url',
       success(res) {
         this.setData({
           asyncNewsData: res.data, // 更新数据
         });
       },
     });
   }

4. **阻止搜索框滚动**:
要使搜索框保持静止，可以在`scroll-view`组件上添加`bindscrolltolower`事件处理程序，取消默认行为：

   scroll-view bindscrolltolower="onScrollToLower"

在`methods`部分添加事件处理方法：

   methods: {
     onScrollToLower(e) {
       e.preventDefault(); // 取消滚动
     }
   }

现在，当滚动view的内容时，搜索框会始终保持在顶部，而数据会在scroll-view中滚动显示。注意，实际代码可能需要调整以适应您的具体需求和uni-app API。