uni-app 下拉加检索 功能

在uni-app中实现下拉刷新加搜索功能，你可以结合onPullDownRefresh事件和搜索输入框来实现。以下是一个简化的代码示例，展示如何在uni-app中实现这一功能。

首先，确保你的页面结构包含了一个可滚动的视图区域和一个搜索输入框。在pages/index/index.vue文件中：

<template>
  <view class="container">
    <!-- 搜索输入框 -->
    <view class="search-bar">
      <input v-model="searchQuery" placeholder="请输入搜索关键词" @input="onSearchInput" />
      <button @click="onSearch">搜索</button>
    </view>
    
    <!-- 列表视图，使用scroll-view实现可滚动区域 -->
    <scroll-view scroll-y="true" @scrolltolower="onLoadMore" :style="{height: 'calc(100vh - 100px)'}">
      <view v-for="(item, index) in listData" :key="index" class="list-item">
        {{ item.name }}
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      listData: [], // 列表数据
      searchQuery: '', // 搜索关键词
      refreshing: false, // 刷新状态
      page: 1, // 分页页码
    };
  },
  onLoad() {
    this.fetchData();
  },
  methods: {
    // 下拉刷新
    onPullDownRefresh() {
      this.refreshing = true;
      this.page = 1;
      this.searchQuery = ''; // 清空搜索关键词（可选）
      this.fetchData().then(() => {
        this.$api.closePullDownRefresh(); // 关闭下拉刷新
        this.refreshing = false;
      });
    },
    // 搜索输入
    onSearchInput() {
      this.page = 1; // 重置页码
      this.fetchData();
    },
    // 执行搜索或加载更多数据
    fetchData() {
      // 模拟API请求
      return new Promise((resolve) => {
        setTimeout(() => {
          let data = [];
          if (this.searchQuery) {
            // 搜索逻辑
            data = Array.from({ length: 10 }, (_, i) => ({ name: `搜索结果${i + 1} - ${this.searchQuery}` }));
          } else {
            // 正常加载逻辑
            data = Array.from({ length: 10 }, (_, i) => ({ name: `列表项${(this.page - 1) * 10 + i + 1}` }));
          }
          this.listData = this.page === 1 ? data : [...this.listData, ...data];
          resolve();
        }, 1000);
      });
    },
    // 搜索按钮点击事件
    onSearch() {
      this.fetchData();
    },
    // 加载更多数据
    onLoadMore() {
      if (!this.refreshing) {
        this.page++;
        this.fetchData();
      }
    },
  },
};
</script>

<style>
/* 样式部分略 */
</style>

在这个示例中，我们实现了基本的下拉刷新和搜索功能。当用户下拉刷新时，会重置页码并清空搜索关键词（可选），然后重新加载数据。当用户输入搜索关键词时，也会重置页码并加载搜索结果。加载更多数据的功能通过监听scrolltolower事件实现。

注意，这个示例使用了模拟的API请求（setTimeout），你需要根据实际情况替换为真实的API调用。