当前位置:首页 > uni-app

uniapp搜索框功能

2026-03-05 16:10:37uni-app

uniapp 搜索框功能实现

在 uniapp 中实现搜索框功能可以通过多种方式完成,以下是一些常见的方法和示例代码:

基础搜索框实现

使用 uni-easyinput 组件或原生 input 元素结合搜索按钮:

uniapp搜索框功能

<template>
  <view>
    <uni-easyinput 
      v-model="searchText" 
      placeholder="请输入搜索内容" 
      @confirm="handleSearch"
    >
      <template #right>
        <button @click="handleSearch">搜索</button>
      </template>
    </uni-easyinput>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchText: ''
    }
  },
  methods: {
    handleSearch() {
      uni.showToast({
        title: '搜索:' + this.searchText,
        icon: 'none'
      })
      // 实际搜索逻辑
    }
  }
}
</script>

防抖优化

对于频繁触发的搜索(如实时搜索),建议添加防抖处理:

let timer = null
methods: {
  handleSearch() {
    clearTimeout(timer)
    timer = setTimeout(() => {
      this.performSearch()
    }, 500)
  },
  performSearch() {
    // 实际搜索逻辑
  }
}

搜索历史记录

添加搜索历史存储功能:

uniapp搜索框功能

methods: {
  saveSearchHistory() {
    let history = uni.getStorageSync('searchHistory') || []
    history.unshift(this.searchText)
    history = [...new Set(history)].slice(0, 10)
    uni.setStorageSync('searchHistory', history)
  }
}

接口请求示例

结合后端接口的搜索实现:

async performSearch() {
  try {
    const res = await uni.request({
      url: 'https://api.example.com/search',
      data: {
        keyword: this.searchText
      }
    })
    // 处理返回结果
  } catch (error) {
    uni.showToast({
      title: '搜索失败',
      icon: 'none'
    })
  }
}

样式自定义

通过 CSS 自定义搜索框样式:

.custom-search {
  display: flex;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 20px;
}
.custom-search input {
  flex: 1;
  padding: 0 10px;
}

注意事项

  • 在微信小程序中,input 组件需要添加 confirm-type="search" 属性才能触发键盘的搜索按钮
  • 考虑添加 loading 状态提升用户体验
  • 对于复杂搜索条件,可以设计单独的搜索页面
  • 移动端注意软键盘的处理,可能需要手动控制收起

以上实现可以根据具体需求进行组合和扩展,uniapp 的跨平台特性保证了这些代码在多数平台都能正常运行。

标签: 功能uniapp
分享给朋友:

相关文章

uniapp中如何引用echarts

uniapp中如何引用echarts

在uniapp中引用echarts uniapp中引用echarts可以通过原生方式或第三方插件实现,以下是具体方法: 使用原生echarts 安装echarts依赖 在项目根目录下执行命令:…

uniapp 3.0

uniapp 3.0

uniapp 3.0 核心特性 uniapp 3.0 是 DCloud 推出的跨端开发框架升级版本,支持一套代码编译到 iOS、Android、Web 及各类小程序平台。以下为关键特性与使用要点:…

uniapp关闭广告

uniapp关闭广告

关闭广告的方法 在UniApp中关闭广告通常涉及以下几个方法,具体操作取决于广告的类型和集成方式。 移除广告模块 检查项目中是否集成了广告SDK或相关组件,如ad、ad-draw等。在pages.j…

uniapp 销售日报

uniapp 销售日报

实现销售日报功能的步骤 数据收集与整理 销售日报需要收集每日销售数据,包括销售额、订单数量、商品类别等。数据可以从后端API获取或本地数据库存储。使用uni.request调用接口获取数据,确保数据结…

vue功能实现难点

vue功能实现难点

Vue 功能实现的常见难点 响应式系统深度监听 Vue 的响应式系统基于 Object.defineProperty(Vue 2)或 Proxy(Vue 3),但对嵌套对象或数组的深层属性变化需要额外…

php 实现聊天功能

php 实现聊天功能

PHP 实现聊天功能的方法 使用 WebSocket 和 Ratchet 库 WebSocket 是实现实时聊天的理想选择。Ratchet 是一个 PHP 库,用于处理 WebSocket 连接。…