uniapp搜索框功能
实现搜索框的基本结构
在pages/index/index.vue中创建基础搜索框组件，使用<uni-search-bar>或自定义输入框：
<template>
<view>
<uni-search-bar
v-model="searchText"
placeholder="请输入关键词"
@confirm="handleSearch"
@cancel="handleCancel"
/>
<!-- 搜索结果列表 -->
<view v-if="searchResults.length">
<view v-for="(item,index) in searchResults" :key="index">
{{ item.name }}
</view>
</view>
</view>
</template>处理搜索逻辑
在<script>中定义搜索方法和数据绑定：
export default {
data() {
return {
searchText: '',
searchResults: []
}
},
methods: {
handleSearch() {
// 调用API或本地数据过滤
this.searchResults = this.mockData.filter(item =>
item.name.includes(this.searchText)
);
},
handleCancel() {
this.searchText = '';
this.searchResults = [];
}
}
}优化搜索性能
添加防抖函数避免频繁触发搜索：
import { debounce } from '@/common/utils.js';
methods: {
handleSearch: debounce(function() {
// 实际项目中替换为API请求
uni.request({
url: '/api/search',
data: { keyword: this.searchText },
success: (res) => {
this.searchResults = res.data.list;
}
});
}, 500)
}本地历史记录功能
通过uni.setStorage保存搜索记录：
handleSearch() {
const history = uni.getStorageSync('searchHistory') || [];
if (!history.includes(this.searchText)) {
history.unshift(this.searchText);
uni.setStorageSync('searchHistory', history.slice(0, 10));
}
}样式自定义
通过CSS调整搜索框外观：
/* 修改uni-search-bar默认样式 */
/deep/ .uni-searchbar {
background-color: #f8f8f8;
}
/deep/ .uni-searchbar__box {
border-radius: 20px;
}注意事项
- 真机测试时需处理键盘收起事件（
@blur） - 列表数据量大时建议使用
<scroll-view>包裹 - 安卓端需注意输入框聚焦时页面顶起问题，可通过
manifest.json配置调整窗口样式
