位置: IT常识 - 正文

【小程序项目开发-- 京东商城】uni-app之自定义搜索组件(中)-- 搜索建议(微信小程序项目开发实战)

编辑:rootadmin
【小程序项目开发-- 京东商城】uni-app之自定义搜索组件(中)-- 搜索建议

推荐整理分享【小程序项目开发-- 京东商城】uni-app之自定义搜索组件(中)-- 搜索建议(微信小程序项目开发实战),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:小程序 项目,小程序怎么启动项目,小程序怎么启动项目,微信小程序项目开发实战,小程序项目开发流程,小程序开发项目,小程序项目开发流程,微信小程序项目开发实战,内容如对您有帮助,希望把文章链接给更多的朋友!

🤵‍♂️ 个人主页: @计算机魔术师 👨‍💻 作者简介:CSDN内容合伙人,全栈领域优质创作者。

🌐 推荐一款找工作神器网站: 点击跳转牛客网 |笔试题库|面试经验|实习招聘内推|

还没有账户的小伙伴 速速点击链接登录注册把!🎉🎉

该文章收录专栏 ✨ 2022微信小程序京东商城实战 ✨

文章目录一、 渲染UI结构二、 input事件处理三、搜索框自动获取焦点四、防抖处理五、根据关键词查询搜索建议列表5.1 数据请求5.2 渲染UI结构5.3 点击建议跳转详情页一、 渲染UI结构可在开发工具中添加该页面编译模式(每次编译即在该页面)

使用uni-app官方搜索组件可快速搭建 输入框

通过官方组件提供的搜索组件以及自定义结构如下

<uni-search-bar :radius="100" @input="input" cancelButton="none" bgColor="#dfdfdf"></uni-search-bar>【小程序项目开发-- 京东商城】uni-app之自定义搜索组件(中)-- 搜索建议(微信小程序项目开发实战)

效果:

设置背景方法一(用view包裹,设置样式):<view class="search-box"> <uni-search-bar :radius="100" @input="input" cancelButton="none" bgColor="#dfdfdf"></uni-search-bar> </view> .search-box { background-color: #ff1e0a; }设置背景方法二(在官方组件内设置) 在uni_modules找到官方组件包

效果(一样)

添加吸顶效果(保持在页面顶部) .search-box { // 吸顶 position: sticky; top: 0; z-index: 999; }二、 input事件处理

在input组件中,输入的值都在input对该函数所传的参数中(不是e.value,官方将input事件绑定事件结构为value值)

methods: { // 搜索框input事件处理 input(e){ console.log(e) // 输出对应值 } }

效果

三、搜索框自动获取焦点

实现在用户点击搜索框 跳转到搜索页面时,搜索框自动获取焦点(可输入)

在官方组件源文件修改如下show , showsync属性为true(使其判断为真,焦点为真显示) 修改如下 注意(预览效果需要在真机上预览,开发工具上与真机或多或少有些不兼容): 四、防抖处理

可以看到,每次输入键入一次数据都会触发一次input请求,我们设置在五百毫秒内用户输入数据时不触发请求,五百毫秒后用户没有输入数据时触发请求,实现 防抖处理

这里我们通过JavaScript 延时器中的setTimeout和clearTimeout实现(延时与取消延时)

setTimeout语法格式setTimeout(要执行的代码, 等待的毫秒数)setTimeout(JavaScript 函数, 等待的毫秒数)clearTimeout语法格式clearTimeout() 方法可取消由 setTimeout() 方法设置的定时操作。clearTimeout() 方法的参数必须是由 setTimeout() 返回的 ID 值(对应取消)。最终实现代码(注意 timer 是全局变量) data() { return { inputString: '', timer: null }; }, methods: { // 搜索框input事件处理 input(e) { // 触发事件 取消赋值操作 clearTimeout(timer) // 500毫秒后赋值 timer = setTimeout(() => { this.inputString = e console.log(this.inputString) }, 500) }

效果:

五、根据关键词查询搜索建议列表5.1 数据请求请求参数参数名参数说明备注query查询内容如: goods/qsearch?query=小米接口数据样式{ "message": [ { "goods_id": 57332, "goods_name": "400毫升 海鲜食品冷藏冰包 注水冰袋医用冰袋户外冷藏保鲜熟食冷藏反复使用(10个装)" }, { "goods_id": 57194, "goods_name": "亿力洗车工具汽车美容用品海绵刷不伤车漆擦车海棉清洁海绵" } ], "meta": { "msg": "获取成功", "status": 200 }}定义data数据节点searchResults data() { return { inputString: '', timer: null, searchResults: '' }; },再input事件处理函数中调用 获取数据函数getsearchList input(e) { // 触发事件 取消赋值操作 clearTimeout(this.timer) // 500毫秒后赋值 this.timer = setTimeout(() => { this.inputString = e this.getSearchList() }, 500) }定义getsearchList函数(判断是否为空格和空字符串) async getSearchList() { // 如果是空字符串则 不请求 if (this.inputString == '') { this.searchSuggest = [] return } // 如果为空格,则报错 else if (this.inputString.trim() === '') return uni.$showMsg('输入内容有误') const { data: res } = await uni.$http.get('/api/public/v1/goods/qsearch', { query: this.inputString }) // 请求错误报错 if (res.meta.status != 200) return uni.$showMsg() // 赋值 this.searchSuggest = res.message },效果(可以看到searchList成功接受到了值): 输入空格报错 5.2 渲染UI结构结构 <!-- 搜索建议列表容器 --> <view class="sgg-list-container"> <view class="sgg-item" v-for="(product,i) in searchResults" v-bind:key="i"> <view class="sgg-name">{{product.goods_name}}</view> <uni-icons type="right"></uni-icons> </view> </view>样式.sgg-list-container { .sgg-item { display: flex; background-color: #fff; align-items: center; border-top: 3rpx solid #efefef; justify-content: space-between; padding: 20rpx 10rpx; .sgg-name { // 不允许换行 white-space: nowrap; // 超出不显示 overflow: hidden; // 超出文本用ellipsis代替 text-overflow: ellipsis; margin-right: 5rpx; font-size: 28rpx; } }}

效果:

5.3 点击建议跳转详情页方法一 组件式跳转: 将view 改为 navigator组件 并传商品ID参数

结构

<!-- 搜索建议列表容器 --> <view class="sgg-list-container"> <navigator class="sgg-item" v-for="(product,i) in searchResults" v-bind:key="i" :url="'/subpackages/goods_list/goods_list?cat_id=' + product.goods_id"> <view class="sgg-name">{{product.goods_name}}</view> <uni-icons type="right"></uni-icons> </navigator> </view>方法二 编程式跳转: 绑定click 事件,定义函数 <!-- 搜索建议列表容器 --> <view class="sgg-list-container"> <view class="sgg-item" v-for="(product,i) in searchResults" v-bind:key="i" @click="gotogoodlist(product)"> <view class="sgg-name">{{product.goods_name}}</view> <uni-icons type="right"></uni-icons> </view> </view>gotogoodlist(item){ uni.navigatorto({ url = "'/subpackages/goods_list/goods_list?cat_id=' + item.goods_id"})

效果:

✨谢谢你的阅读,您的点赞和收藏就是我创造的最大动力!✨
本文链接地址:https://www.jiuchutong.com/zhishi/289007.html 转载请保留说明!

上一篇:新建vite+vue3+ts项目,以及解决过程中遇到的问题(新建vue项目)

下一篇:日本北海道 (© Hiroshi Yokoyama/eStock Photo)

  • hp台式机bios设置启动顺序(hp台式机bios设置legacy)

    hp台式机bios设置启动顺序(hp台式机bios设置legacy)

  • excel怎么转化成word格式(EXcel怎么转化成表格)

    excel怎么转化成word格式(EXcel怎么转化成表格)

  • 微信读书有无限卡为什么还要购买章节(微信读书有无限卡突然收费)

    微信读书有无限卡为什么还要购买章节(微信读书有无限卡突然收费)

  • 卸载鲁大师什么后果(卸载鲁大师怎么卸载)

    卸载鲁大师什么后果(卸载鲁大师怎么卸载)

  • 变频压缩机接线方法(变频压缩机接线图)

    变频压缩机接线方法(变频压缩机接线图)

  • 雨课堂可以手机和电脑同时登录吗(雨课堂可以手机上课吗)

    雨课堂可以手机和电脑同时登录吗(雨课堂可以手机上课吗)

  • qq字符怎么开启(qq字符在哪打开)

    qq字符怎么开启(qq字符在哪打开)

  • QQ关联对方为什么都是撤回(qq关联为什么对方能看到我的我看不到他的)

    QQ关联对方为什么都是撤回(qq关联为什么对方能看到我的我看不到他的)

  • wps怎么隐藏行和列(wps怎么隐藏行和列 ipad)

    wps怎么隐藏行和列(wps怎么隐藏行和列 ipad)

  • 网络层的设备有哪些(网络层的设备有哪些类型)

    网络层的设备有哪些(网络层的设备有哪些类型)

  • 腾讯会议有限制人数吗(腾讯会议有限制时长吗)

    腾讯会议有限制人数吗(腾讯会议有限制时长吗)

  • 京东卖家货款多久到账(京东商家贷款额度)

    京东卖家货款多久到账(京东商家贷款额度)

  • 探探要花钱才能聊天吗(探探花钱才能聊天吗)

    探探要花钱才能聊天吗(探探花钱才能聊天吗)

  • 顺风车取消订单什么时候退款(顺风车取消订单扣多少信用分)

    顺风车取消订单什么时候退款(顺风车取消订单扣多少信用分)

  • 小米回收站删除的照片能找回吗(小米回收站删除的视频能找回吗)

    小米回收站删除的照片能找回吗(小米回收站删除的视频能找回吗)

  • 淘宝会员卡怎么用(淘宝会员卡怎么没了)

    淘宝会员卡怎么用(淘宝会员卡怎么没了)

  • realmex2pro支持5gwifi吗(realmex2pro支持内存卡吗)

    realmex2pro支持5gwifi吗(realmex2pro支持内存卡吗)

  • 华为怎么退出talkback(华为怎么退出talkbace)

    华为怎么退出talkback(华为怎么退出talkbace)

  • oppoa3怎样加日期水印(oppo手机怎么加日期)

    oppoa3怎样加日期水印(oppo手机怎么加日期)

  • 微信怎么查转给一个人的账单(微信怎么查转给一个人的转账记录)

    微信怎么查转给一个人的账单(微信怎么查转给一个人的转账记录)

  • 1688视频怎么保存本地(1688视频怎么保存下来)

    1688视频怎么保存本地(1688视频怎么保存下来)

  • 嘀嗒出行车主邀请码在哪里(嘀嗒出行邀请车主)

    嘀嗒出行车主邀请码在哪里(嘀嗒出行邀请车主)

  • 视频没有tv标志怎么投屏

    视频没有tv标志怎么投屏

  • vivox23nfc功能在哪里(vivox23nfc功能怎么用)

    vivox23nfc功能在哪里(vivox23nfc功能怎么用)

  • 话费充值卡怎么用(话费充值卡怎么回收)

    话费充值卡怎么用(话费充值卡怎么回收)

  • iphone xs支持多少w快充(iphone xs支持多少频段)

    iphone xs支持多少w快充(iphone xs支持多少频段)

  • 英特尔酷睿和至强处理器的区别是什么?(英特尔酷睿和至强的区别)

    英特尔酷睿和至强处理器的区别是什么?(英特尔酷睿和至强的区别)

  • linux中断的上半部和下半部详解(linux中断原理)

    linux中断的上半部和下半部详解(linux中断原理)

  • phpcms图形验证码不显示不出来怎么办(图形验证码api)

    phpcms图形验证码不显示不出来怎么办(图形验证码api)

  • 印花税资本金项目如何缴纳
  • 财务管理税后利息率计算公式
  • 无形资产加计扣除最新政策
  • 事务所纳税
  • 分公司的所得税怎么申报
  • 利润表中财务费用为负数是什么意思
  • 运输发票抵扣进项税率
  • 牛奶 税率
  • 设定受益计划会计处理案例
  • 房地产开发企业预收款预缴增值税
  • 工资分配率的计算公式
  • 公司注销时有大额应付款如何做账务处理合适?
  • 金税盘发票号码确认显示不全
  • 异地工程预缴个税
  • 企业所得税减免优惠政策
  • 小规模纳税人开专票税率是1%还是3%
  • 个体户地税怎么收费
  • 销售已使用过的固定资产增值税
  • 房地产公司基础设施建设费包括哪些费用
  • 事业单位研发支出资本化
  • 薪酬费用属于什么科目
  • 残保金逾期未申报的税务怎么处理
  • 个人交社保可以交生育险吗
  • 一直零申报会怎么样
  • linux转换windows
  • 期末余额和期初余额
  • 无形资产摊销的会计科目怎么录
  • 税控盘抵减
  • 进口应税消费品会计分录
  • 金鱼花的养殖方法与注意事项
  • 公司想减少注册资本
  • 论文可查
  • 我国增值税的纳税范围包括
  • 微信小程序webview支付
  • 联邦学习(FL)+差分隐私(DP)
  • yolov5改进点
  • vue组件怎么使用
  • 自产自销的农产品可以抵税吗
  • 企业小微企业贷逾期起诉法人房子会被拍卖吗?
  • 从业人数啥意思
  • 个人借款利息收入缴纳个税吗
  • 终止经营损益列报 举例
  • 个人所得税分摊方式怎么填
  • 预付账款和应付账款怎么合并
  • MySQL ERROR 2013 (HY000)错误解决方法
  • 开办费用的财务是如何处理的
  • 发票收款人和复核人在哪儿政
  • 普通发票可以抵扣吗
  • 固定资产暂停使用申请怎么写
  • 以公允价值计量的金融资产
  • 怎样理解
  • 进项税额大于销项税月末结转
  • 房屋出租要交的税有哪些
  • 银行账与实际账不符
  • 餐饮行业招聘方案
  • 基本户转法人个人账户如何做账
  • win10打开软件提示允许此应用对你设备进行更改
  • win10预览版好吗
  • mssecsvr.exe病毒现象
  • msscli.exe - msscli是什么进程 有什么用
  • win7虚拟内存最大设置多少
  • win7睡眠设置在哪
  • 在linux中使用什么命令可以给命令起别名
  • Win10 64位系统下QQ语音和QQ视频音量很小的两种解决方法
  • jquery验证码
  • 批处理/d
  • 链接符怎么删除
  • unity增加组件
  • 爬虫爬取微博
  • 浅谈是什么意思
  • linux如何配置
  • python和微信交互
  • 如何查询车辆购买的保险
  • 工商与税务合并了吗
  • 房屋契税2013年收费标准
  • oppo纳税额
  • 税务人员少征税款
  • 去地税开个人发票
  • 省纪检委派驻机构值得去么
  • 广西残疾人保障金比例
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设