uniapp搜索框组件
Uniapp 搜索框组件实现方法
在 Uniapp 中实现搜索框功能，可以通过原生组件或第三方插件完成。以下是几种常见实现方式：
使用 uni-ui 的 SearchBar 组件
安装 uni-ui 后直接引入 SearchBar 组件：
<template>
<uni-search-bar @confirm="search" @input="input" :radius="100" cancelButton="none">
</uni-search-bar>
</template>
<script>
import uniSearchBar from '@dcloudio/uni-ui/lib/uni-search-bar/uni-search-bar.vue'
export default {
components: {uniSearchBar},
methods: {
search(e) {
console.log('搜索内容：', e.value)
},
input(e) {
console.log('输入内容：', e.value)
}
}
}
</script>自定义搜索框组件
通过 view 和 input 组合实现：
<template>
<view class="search-box">
<input
class="search-input"
placeholder="请输入搜索内容"
v-model="keyword"
@confirm="handleSearch"
@input="handleInput"
/>
<text class="search-icon">🔍</text>
</view>
</template>
<script>
export default {
data() {
return {
keyword: ''
}
},
methods: {
handleSearch() {
uni.navigateTo({
url: '/pages/search/result?keyword=' + this.keyword
})
},
handleInput(e) {
this.keyword = e.detail.value
}
}
}
</script>
<style>
.search-box {
display: flex;
align-items: center;
padding: 10px 15px;
background-color: #f5f5f5;
border-radius: 20px;
}
.search-input {
flex: 1;
height: 30px;
font-size: 14px;
}
.search-icon {
margin-left: 10px;
font-size: 16px;
}
</style>使用第三方插件
-
安装 colorui 组件库：
npm install colorui -
使用 cu-custom 搜索组件：
<template> <cu-custom bgColor="bg-gradual-blue" :isBack="true"> <view slot="content">搜索框</view> <view slot="right"> <view class="action"> <view class="cu-load load-cuIcon" :class="!isLoad?'loading':'over'"></view> </view> </view> </cu-custom> </template>
注意事项
- 搜索框样式需要根据项目需求调整
- 移动端注意输入法弹出时的布局适配
- 防抖处理可以减少频繁请求
- 搜索历史记录建议使用本地存储
以上方法均可实现 Uniapp 搜索框功能，选择取决于项目复杂度和个性化需求。uni-ui 的 SearchBar 提供开箱即用的解决方案，自定义组件则更灵活可控。
