uniapp 搜索

uniapp 搜索功能实现方法

全局搜索组件集成

在pages.json中配置全局搜索栏，适用于所有页面顶部显示搜索框。示例代码：

"globalStyle": {
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "uni-app",
  "navigationBarBackgroundColor": "#F8F8F8",
  "backgroundColor": "#F8F8F8",
  "app-plus": {
    "titleNView": {
      "searchInput": {
        "align": "center",
        "backgroundColor": "#fff",
        "borderRadius": "12px",
        "placeholder": "请输入搜索内容",
        "disabled": false
      }
    }
  }
}

页面级搜索框实现

使用uni-search-bar组件实现单页面搜索功能，支持实时搜索和取消操作：

<template>
  <view>
    <uni-search-bar 
      @confirm="search" 
      @input="input" 
      @cancel="cancel"
      placeholder="商品搜索">
    </uni-search-bar>
  </view>
</template>

搜索逻辑处理

通过@input事件实现实时搜索建议，使用防抖函数优化性能：

let timer = null
methods: {
  input(e) {
    clearTimeout(timer)
    timer = setTimeout(() => {
      this.getSuggestions(e)
    }, 500)
  },
  getSuggestions(keyword) {
    uni.request({
      url: 'https://api.example.com/search',
      data: { keyword },
      success: (res) => {
        this.suggestions = res.data.list
      }
    })
  }
}

历史记录存储

使用uni.setStorageSync保存搜索历史，并支持本地缓存管理：

saveHistory(keyword) {
  let histories = uni.getStorageSync('searchHistory') || []
  if (!histories.includes(keyword)) {
    histories.unshift(keyword)
    uni.setStorageSync('searchHistory', histories.slice(0, 10))
  }
}

搜索结果页设计

建议采用分页加载模式，结合uni-load-more组件实现无限滚动：

<scroll-view 
  scroll-y 
  @scrolltolower="loadMore"
  style="height: calc(100vh - 100px)">
  <view v-for="item in list" :key="item.id">
    <!-- 结果项内容 -->
  </view>
  <uni-load-more :status="loadingStatus"></uni-load-more>
</scroll-view>

多端适配方案

通过条件编译处理各平台差异：

// #ifdef APP-PLUS
this.adjustSearchBarPosition()
// #endif
// #ifdef H5
this.initH5SearchEvent()
// #endif