UniApp 实现搜索页逻辑详解

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


一、页面结构设计

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

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

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

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

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

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

二、核心逻辑拆解

1.搜索输入框

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

关键点

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

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

  1. 把关键字加入 历史搜索数组 ,并保存到 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>

四、效果总结

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

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

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

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

效果图展示。

​编辑

​编辑

​编辑

​编辑

相关推荐
前端达人1 小时前
「React实战面试题」useEffect依赖数组的常见陷阱
前端·javascript·react.js·前端框架·ecmascript
开开心心就好1 小时前
PDF清晰度提升工具,让模糊文档变清晰
java·服务器·前端·python·智能手机·pdf·ocr
路修远i1 小时前
灰度和红蓝区
前端
路修远i1 小时前
cursor rules 实践
前端·cursor
路修远i1 小时前
前端-跨域梳理
前端
路修远i2 小时前
npm发包
前端
Nan_Shu_6142 小时前
学习:uniapp全栈微信小程序vue3后台 (24)
前端·学习·微信小程序·小程序·uni-app
骑驴看星星a2 小时前
Vue中的路由细节
前端·javascript·vue.js
你的人类朋友2 小时前
说下token和refresh-token
前端·后端·安全