位置: 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)

  • 运输公司税率和税种
  • 公司租用其他公司车辆能报销保险费吗,发票怎么开
  • 合并资产负债表和合并利润表的区别
  • 银行电子承兑汇票怎么转让
  • 金税盘一年
  • 员工报销公司是哪个部门
  • 出口退税逾期申报,需申报出口货物收汇情况表
  • 金蝶财务软件固定资产怎样计提折旧
  • 工业企业外购存货的入账价值一般包括增值税吗
  • 承兑汇票转出
  • 小规模纳税人需要交哪些税
  • 出口企业是外贸企业吗
  • 预缴增值税一般计税依据
  • 同一套房
  • 社保补缴上月的在当月扣款
  • 个税系统中允许捐赠比例是多少?
  • 营改增安装服务费税率
  • 餐饮发票增值税税率是多少
  • 水利建设基金的计税依据及税率
  • 税控盘逾期未抄报,交罚款需要带什么
  • 离退休员工再任职薪酬的财税处理?
  • 护建设税和教育费附加?
  • 企业生产销售白酒取得的下列款项中,应并入
  • 工会固定资金是什么
  • mac安装windows不能用键盘
  • 如何在excel中取最早与最晚
  • 一般纳税人的月报,季报年报
  • 不良资产购买流程
  • 域名停靠是病毒吗
  • 政府发放奖励金如何入账
  • 对公账户发放工资要固定几号打吗
  • schupd.exe - schupd是什么进程 有什么用
  • linux入门学习
  • 无偿赠送是否需要交个人所得税分哪些情况
  • 股东增资是不是利好
  • 提坏账准备的会计分录 2022
  • echarts地图参数设置
  • 运输中合理损耗计入存货成本吗
  • 注意力机制cbam
  • php图像识别
  • 营改增小规模纳税人可以进项税额扣除对吗
  • 增值税附加税的计算基数
  • 怎么查看代理记账协议终止情况
  • 当月工资未发放的怎么记账
  • phpcms添加内容
  • 应计入损益的利得有什么
  • 企业所得税汇算清缴会计分录
  • 金蝶专业版如何打印凭证
  • 办税人员可绑定银行卡吗
  • 固定资产的入账金额怎么算
  • 软件销售收入确认时点
  • 公司注销之前需要做些什么
  • 固定资产本期增加怎么算
  • 核定征收和查账征收报税有区别吗
  • 累计摊销的会计分录有哪些
  • 本月计提费用,发票下个月到可以吗
  • 委托代理进口账务处理
  • 支付给其他公司的借款属于什么现金流
  • 党委经费是国家政府出吗?
  • 应收利息的账务处理方法
  • mysql 通过拷贝数据文件的方式进行数据库迁移实例
  • win8 无线网络连不上
  • auto mac
  • 如何查看win7激活码能重复使用
  • win10系统怎么设置不锁屏和休眠
  • window10升级不了
  • function函数的定义
  • python sha256加密解密
  • linux的ls-l命令
  • java script和java区别
  • android canvas rotate
  • 购买服务合同模版
  • 青岛胶州国际机场在哪个区
  • 单据整理方法
  • 沈阳市地方税务局
  • 如何查询甘肃省清产核资系统扶贫项目资产金额
  • 开健身会所国家有补贴吗
  • 中国企业银行可以转账吗
  • 税务总局全国增值税发票查验平台
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设