实现关键字搜索功能——封装调用接口方法-携带参数param & v-if为空判断模块消失
- 搜索条效果
<div class="search-input">
<icon type='search' size='16'/>
<input placeholder="请输入关键字" />
</div>
<button class="cancel">取消</button>
- 搜索结果列表
<div class="search-modal">
<div class="search-item">
商品名称
</div>
</div>
- 清空搜索历史
<div class="history">
<h4>搜索历史</h4>
<icon type='clear' size='16'/>
</div>
- 搜索历史关键字列表
<div class="history-list">
<div class="history-item">
<navigator :url="'/pages/search_list/main?query=keyword'">
搜索关键字
</navigator>
</div>
</div>
关键字搜索
- 输入关键字,调用后台接口,获取数据,渲染列表
// 事件绑定
// input事件触发的条件:只要有字符变化就触发
// change事件触发的条件:失去焦点时触发
// 如何限制触发频率:函数防抖;函数节流
<input @input='queryData' v-model='keyword' placeholder="请输入关键字" />
// 调用接口
async queryData () {
// 调用接口需要传递参数
let res = await request('goods/qsearch', {
query: this.keyword
})
this.list = res.data.message
}
实例:
调用接口携带参数param,重新封装接口数据的调用方法
在src/utils/request.js
/*
封装通用的后台接口调用方法
*/
export default (path, param) => {
return new Promise((resolve, reject) => {
// 发送请求获取接口数据
let baseUrl = `https://www.zhengzhicheng.cn/api/public/v1/${path}`
wx.request({
url: baseUrl,
data: param,
success: (res) => {
if (res.data.meta.status === 200) {
// this.swiper = res.data.message
// 获取正常的后台数据
resolve(res.data.message)
}
}
})
})
}
给搜索框绑定事件@input='queryData'
<template>
<div>
<!-- 顶部搜索栏 -->
<div class="search">
<div class="search-content">
<!-- 输入框 -->
<div class="search-input">
<icon type='search' size='16'/>
<input @input='queryData' v-model='keyword' placeholder="请输入关键字" />
</div>
<!-- 取消按钮 -->
<button class="cancel" v-if='keyword' @click='handleCancel'>取消</button>
<!-- 搜索的结果 -->
<div class="search-modal" v-if='keyword'>
<div :key='item.goods_id' v-for='item in list' class="search-item">
{{item.goods_name}}
</div>
</div>
</div>
</div>
</div>
</template>
携带参数,调用后台-关键字搜索-接口
<script>
import request from '../../utils/request.js'
export default {
methods: {
async queryData () {
// 根据关键字查询匹配的商品列表
let res = await request('goods/qsearch', {
})
console.log(res)
},
}
}
</script>
调用接口
打印关键字搜索结果
静态搜索结果
定义和储存搜索结果,并进行遍历
<template>
<div>
<!-- 顶部搜索栏 -->
<div class="search">
<div class="search-content">
<!-- 输入框 -->
<div class="search-input">
<icon type='search' size='16'/>
<input @input='queryData' v-model='keyword' placeholder="请输入关键字" />
</div>
<!-- 取消按钮 -->
<button class="cancel" v-if='keyword' @click='handleCancel'>取消</button>
<!-- 搜索的结果 进行遍历 且 关键字去除时,搜索结果列表消失-->
<div class="search-modal" v-if='keyword'>
<div :key='item.goods_id' v-for='item in list' class="search-item">
{{item.goods_name}}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import request from '../../utils/request.js'
export default {
data () {
return {
// 搜索关键字
keyword: '',
// 搜索的列表结果
list: [],
}
},
methods: {
async queryData () {
// 根据关键字查询匹配的商品列表
let res = await request('goods/qsearch', {
})
// console.log(res)
//更新搜索列表结果
this.list = res
},
}
}
</script>
关键字搜索效果-动态
注意:
去除搜索关键字时,搜索结果列表应该消失
添加判断v-if='keyword'
,完整代码见上