UniApp 实现搜索页逻辑详解

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

一、页面结构设计

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

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

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

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

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

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

二、核心逻辑拆解

1.搜索输入框

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

关键点

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

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

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

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

scss 复制代码

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

触发搜索函数

scss 复制代码

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

3.请求数据

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

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

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

ini 复制代码

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 监听触底事件，实现分页加载：

scss 复制代码

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

5.初始化参数

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

ini 复制代码

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.完全没有搜索结果 → 显示空状态图

ini 复制代码

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

四、效果总结

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

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

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

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

效果图展示。

编辑