【愚公系列】2022年11月 微信小程序-优购电商项目-搜索页面
2023-06-13 09:15:13 时间
文章目录
前言
搜索功能在电商领域是非常常见的一个功能具体表现在两个方面:
对用户来说,生鲜电商类的搜索功能通常是用来解决“快速找到满意的商品”的问题。“快速找到满意的商品”中的“快速”和“满意”是关键词,但二者其实在很大程度上是矛盾的。一方面“快速”意味着用户的搜索操作应尽量方便、快捷,也就是要求平台应当尽量少的让用户交互提供信息;但另一方面,“满意”通常又意味着平台需要尽量多的与用户交互。毕竟,平台上的商品数以万计,只有更多的获取用户信息才能更好的明白客户到底想买什么。
对平台来说,在产品设计过程中,还应当充分考虑平台“充分利用流量号召用户产生更多购买意向”的需求。
一、搜索页面
1. 业务逻辑
- 获取输⼊框的值进⾏搜索和渲染
- 点击 取消 按钮时 清除输⼊状态,修改⻚⾯模样
2.涉及的接口数据
- 搜索建议查询
3. 关键技术
- ⼩程序 输⼊框组件
- 输⼊值改变时,为了提⾼性能,使⽤ 防抖 技术
二、搜索页面代码
1.页面代码
/*
1 输入框绑定 值改变事件 input事件
1 获取到输入框的值
2 合法性判断
3 检验通过 把输入框的值 发送到后台
4 返回的数据打印到页面上
2 防抖 (防止抖动) 定时器 节流
0 防抖 一般 输入框中 防止重复输入 重复发送请求
1 节流 一般是用在页面下拉和上拉
1 定义全局的定时器id
*/
import { request } from "../../request/index.js";
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({
data: {
goods:[],
// 取消 按钮 是否显示
isFocus:false,
// 输入框的值
inpValue:""
},
TimeId:-1,
// 输入框的值改变 就会触发的事件
handleInput(e){
// 1 获取输入框的值
const {value}=e.detail;
// 2 检测合法性
if(!value.trim()){
this.setData({
goods:[],
isFocus:false
})
// 值不合法
return;
}
// 3 准备发送请求获取数据
this.setData({
isFocus:true
})
clearTimeout(this.TimeId);
this.TimeId=setTimeout(() => {
this.qsearch(value);
}, 1000);
},
// 发送请求获取搜索建议 数据
async qsearch(query){
const res=await request({url:"/goods/qsearch",data:{query}});
console.log(res);
this.setData({
goods:res
})
},
// 点击 取消按钮
handleCancel(){
this.setData({
inpValue:"",
isFocus:false,
goods:[]
})
}
})
<view class="search_row">
<input value="{{inpValue}}" placeholder="请输入您要搜索的商品" bindinput="handleInput"> </input>
<button bindtap="handleCancel" hidden="{{!isFocus}}">取消</button>
</view>
<view class="search_content">
<navigator url="/pages/goods_detail/index?goods_id={{item.goods_id}}" class="search_item" wx:for="{{goods}}" wx:key="goods_id">
{{item.goods_name}}
</navigator>
</view>
page {
background-color: #dedede;
padding: 20rpx;
}
.search_row {
height: 60rpx;
display: flex;
}
.search_row input {
background-color: #fff;
flex: 1;
height: 100%;
padding-left: 30rpx;
}
.search_row button {
width: 110rpx;
height: 100%;
padding: 0;
margin: 0 10rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 26rpx;
}
.search_content {
margin-top: 30rpx;
}
.search_content .search_item {
background-color: #fff;
font-size: 26rpx;
padding: 15rpx 10rpx;
border-bottom: 1rpx solid #ccc;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
2.效果
相关文章
- Codelf 搜索开源代码帮程序员命名
- 问题:在项目中搜索所有中文
- LyScript 自实现汇编搜索功能
- LeetCode | 搜索插入位置
- 【错误记录】BLE 蓝牙搜索失效 ( 关闭了 GPS 定位导致的问题 | 蓝牙串口工具推荐 )
- ChatGPT“大战”谷歌搜索:新王加冕还是旧王延续?
- “台湾省山西刀削面”搜索过多,百度地图宕机;BOSS直聘即将实行末位淘汰;B站回应HR称核心用户是Loser |Q资讯
- WordPress 技巧:提高 WordPress 搜索的相关性
- MySQL实现分词搜索(FULLTEXT)的方法
- Ubuntu 13.10将匿名化Dash用户搜索数据
- 光速!搜索、学习和实践 Linux 命令!!
- Linux系统全局搜索实现方法(linux全局搜索)
- MSSQL搜索:优化大型数据集的查询效率(mssql搜索)
- PHP文本数据库的搜索方法
- 仿google搜索提示SuggestFramework的使用
- .net搜索查询并实现分页实例