UniApp 实现搜索页逻辑详解

        在小程序中，搜索功能是非常常见的需求。今天分享一个搜索页的实现逻辑，包含 搜索输入、历史记录、热门搜索、分页加载、无数据处理 等核心功能

一、页面结构设计

        页面主要分为以下几个部分：

                1.搜索框：输入关键字，支持回车触发搜索、清除、取消。

                2.历史搜索：存储用户输入过的搜索关键字。

                3.热门搜索：给用户推荐一些固定的搜索词。

                4.搜索结果列表：展示接口返回的数据。

                5.无数据提示：当搜索不到结果时展示空状态。

二、核心逻辑拆解

        1.搜索输入框

                当用户输入关键字并点击回车（confirm 事件）时，需要触发搜索逻辑。

                关键点

                1.先 trim 输入内容，避免全是空格。

                2.如果关键字为空，直接 return，不做请求。

               3. 把关键字加入 历史搜索数组，并保存到 localStorage。

                4.重置参数对象 queryParams，重新发起请求。

const onSearch = () => {
  uni.showLoading()
  queryParams.value.keyword = queryParams.value.keyword.trim()
  if (!queryParams.value.keyword) {
    uni.hideLoading()
    return
  }
  // 去重 + 限制长度
  historySearch.value = [...new Set([...historySearch.value, queryParams.value.keyword])].slice(0,10)
  uni.setStorageSync("historySearch", historySearch.value)
  initParams(queryParams.value.keyword) // 重置参数
  searchData() // 发请求
}

        2.点击标签搜索

                无论是历史搜索还是热门搜索，点击后逻辑一样：

                把 tab 的值赋给 keyword

                触发搜索函数

const clickTab = (value) => {
  initParams(value)
  onSearch()
}

     3.请求数据

                发起请求时，把结果追加到 classList，并做以下判断：

        如果 res.data.length < pageSize，说明没有更多数据了，设置 noData = true。

        如果返回数据为空并且当前列表也为空，说明完全没有结果，设置 noSearch = true。

const searchData = async () => {
  try {
    let res = await apiSearchData(queryParams.value)
    classList.value = [...classList.value, ...res.data]
    uni.setStorageSync("storgClassList", classList.value)

    if (res.data.length < queryParams.value.pageSize) {
      noData.value = true
    }
    if (res.data.length === 0 && classList.value.length === 0) {
      noSearch.value = true
    }
  } finally {
    uni.hideLoading()
  }
}

    4.下拉触底加载更多

                小程序中可以用 onReachBottom 监听触底事件，实现分页加载：

onReachBottom(() => {
  if(noData.value) return
  queryParams.value.pageNum++
  searchData()
})

     5.初始化参数

        每次新搜索时，需要清空旧数据、重置状态：

const initParams = (value = "") => {
  classList.value = []
  noData.value = false
  noSearch.value = false
  queryParams.value = {
    pageNum: 1,
    pageSize: 12,
    keyword: value || "",
  }
}

三、无数据处理

        搜索结果可能有三种情况：

                1.正常有数据 → 渲染列表

                2.没有更多数据 → 底部显示 uni-load-more

                3.完全没有搜索结果 → 显示空状态图

<view class="noSearch" v-if="noSearch">
  <uv-empty mode="search" icon="http://cdn.uviewui.com/uview/empty/search.png"></uv-empty>
</view>

四、效果总结

        搜索逻辑清晰：输入 / 点击标签 → 重置参数 → 发请求

        用户体验优化：历史搜索、本地存储、热门搜索

        异常处理：无结果、没有更多

        这样一套逻辑，可以完整覆盖大多数搜索需求。

效果图展示。