搜索功能（三）

2024-07-01 01:14| 来源: 网络整理| 查看: 265

实现关键字搜索功能——封装调用接口方法-携带参数param & v-if为空判断模块消失搜索条效果取消搜索结果列表商品名称清空搜索历史搜索历史搜索历史关键字列表搜索关键字关键字搜索输入关键字，调用后台接口，获取数据，渲染列表 // 事件绑定 // input事件触发的条件：只要有字符变化就触发 // change事件触发的条件：失去焦点时触发 // 如何限制触发频率：函数防抖；函数节流 // 调用接口 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'

取消 {{item.goods_name}}

携带参数，调用后台-关键字搜索-接口

import request from '../../utils/request.js' export default { methods: { async queryData () { // 根据关键字查询匹配的商品列表 let res = await request('goods/qsearch', { }) console.log(res) }, } }

调用接口

在这里插入图片描述

打印关键字搜索结果

在这里插入图片描述

静态搜索结果

在这里插入图片描述

定义和储存搜索结果，并进行遍历

取消 {{item.goods_name}} 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 }, } }

关键字搜索效果-动态

在这里插入图片描述

注意：

去除搜索关键字时，搜索结果列表应该消失

添加判断v-if='keyword'，完整代码见上

【本文地址】

搜索功能（三）

搜索功能（三）

今日新闻

推荐新闻