- 防抖处理
正常情况下:我们每次输入文本框的时候，都会进行请求一次。我们不能这样做(因为会给网络造成拥堵的操作)
<template> <view> <view class="search-box"> <!-- 使用 uni-ui 提供的搜索组件 1. cancelButton:none 一直不显示取消按钮 2.绑定input事件--> <uni-search-bar @input="input" :radius="100" cancelButton="none" :focus="true"></uni-search-bar> </view> </view> </template> <script> export default { data() { return { //延时器的timerId timer: null, }; }, methods: { // input事件的处理函数 input(e) { // 清除对应的延时器-> 目的是假如说在500毫秒内用户仍然在输入那么就重新记时 clearTimeout(this.timer) // 重新启动一个演示器 setTimeout(() => { // 假如说500毫秒时间到了，那么我们就赋值给数据 console.log('搜索页面search文本框->', e) }, 500) } } } </script>
- 实现搜索建议列表
1.在 data 中定义如下的数据节点，用来存放搜索建议的列表数据：
data() { return { // 搜索结果列表 searchResults: [] } } async getSearchList() { if (this.kw === '') { this.searchResults = [] } else { const { data: res } = await uni.$http.get('/api/public/v1/goods/qsearch', { query: this.kw }) if (res.meta.status === 200) { this.searchResults = res.message } } }
- 渲染搜素建议列表
<!-- 搜索建议列表 --> <view class="sugg-list"> <view class="sugg-item" v-for="(item,index) in searchResults" :key="index"> <view class="goods-name"> {{item.goods_name}} </view> <uni-icons type="arrowright" size="16"></uni-icons> </view> </view>
.sugg-list { // 内间距 padding: 0 5px; .sugg-item { // 左右布局 display: flex; // 纵向居中 align-items: center; // 横向两侧对其 justify-content: space-between; font-size: 12px; padding: 13px 0; border-bottom: 1px solid #efefef; .goods-name { // 不允许换行 white-space: nowrap; // 超出的内容隐藏 overflow: hidden; // 超出的文本进行替换 text-overflow: ellipsis; } }
- 点击搜索建议的 Item 项，跳转到商品详情页面：
<!-- 搜索建议列表 --> <view class="sugg-list"> <view class="sugg-item" v-for="(item,index) in searchResults" :key="index" @click="gotoDetail(item.goods_id)"> <view class="goods-name"> {{item.goods_name}} </view> <uni-icons type="arrowright" size="16"></uni-icons> </view> </view> gotoDetail(goods_id) { uni.navigateTo({ url: '/subpkg/goods_detail/goods_detail?goods_id=' + goods_id })
(4).搜索历史
- 渲染搜索历史的基本结构
在 data 中定义搜索历史的假数据：
uni-tag -> 是一个tag标签
// 搜索历史 historyList: ['a', 'b', 'jsxs'] <!-- 搜索历史 --> <view class="history-box"> <!-- 标题区域 --> <view class="history-title"> <text>搜索历史</text> <uni-icons type="trash" size="17"></uni-icons> </view> <!-- 列表区域 --> <view class="history-item"> <uni-tag :text="item" v-for="(item,index) in historyList" :key="index"></uni-tag> </view> </view>
- 美化搜索历史的选项
// 搜索历史 .history-box { padding: 0 5px; .history-title { display: flex; align-items: center; justify-content: space-between; height: 40px; font-size: 13px; border-bottom: 1px solid #efefef; } .history-item { display: flex; flex-wrap: wrap; uni-tag { margin-top: 5px; margin-right: 5px; } } }
- 实现搜索建议和搜索历史的按需展示
- 当搜索结果列表的长度不为 0的时候（
searchResults.length !== 0），需要展示搜索建议区域，隐藏搜索历史区域 - 当搜索结果列表的长度等于 0的时候（
searchResults.length === 0），需要隐藏搜索建议区域，展示搜索历史区域 - 使用
v-if和v-else控制这两个区域的显示和隐藏，示例代码如下：
1.假如搜索的数组存在值那么就显示 v-show="searchResults.length!==0" 2.假如搜索的数组不存在值那么就不显示 v-show="searchResults.length===0"
