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

  • 小规模企业增值税怎么申报
  • 政府农民合作社架构
  • 水电费进项税转出填在哪一栏位
  • 固定资产二级科目取消原因
  • 采购部差旅费会计分录怎么做
  • 出差怎么订机票
  • 预付款核销会计分录
  • 贴现的日期怎么算
  • 小企业准则汇兑损失计入什么科目
  • 常见的会计凭证有哪些
  • 增值税发票的票面金额
  • 小微企业银行贷款印花税
  • 企业借个人款该交税吗
  • 劳保费计入管理费用的什么
  • 收不回的款项怎么处理
  • 企业利用个体户走账
  • 营业执照首次年报
  • 融资租赁 车辆
  • 加油费开的专用发票可以用来抵扣企业所得税吗
  • 2018税务金四发展预测会有哪些?
  • 某运输企业以客运,货运划分
  • 购买股权属于什么科目
  • 使用时间长但金币不见了
  • 建筑工地伙食费会计分录
  • 认筹金客户经常提出哪些问题
  • 折旧可以计入主体成本吗
  • 七喜v8笔记本
  • PHP:xml_set_unparsed_entity_decl_handler()的用法_XML解析器函数
  • 企业所得税申报表
  • 再次研究下cache_lite
  • 销售人员奖励办法
  • 外贸企业退税需要哪些资料
  • php图片链接
  • php判断查询是否有结果
  • 转租收入是否缴纳房产税江苏
  • 保险中介手续费规定最新
  • 在途物资运费会计科目怎么写
  • 境外机动车临时可以办理什么车险业务
  • php ascii
  • 城建税教育费附加什么时候交
  • phple
  • php图片库
  • 企业所得税退税流程
  • Diffusion models代码实战:从零搭建自己的扩散模型
  • 网络销售税率怎么算
  • 金融资产的会计科目
  • python如何将字典中的键值互换
  • phpcms v9官网
  • 累计折旧是当月提还是下月提
  • wordpress怎么安装插件
  • 使用命令方式安装程序
  • 利息应怎么录入收入
  • 企业法人个人贷款哪里好贷
  • 代收收款收据证明范本
  • 建立access数据库一般需要五个步骤
  • 营改增之后建筑业预收账款是否需要预交税款
  • 开发成本的会计科目编码
  • 出售固定资产计入营业外收入
  • 还银行贷款如何计算利息
  • 设计费勘察费计入固定资产吗
  • 车辆理赔款如何入账
  • 核算税金怎么核算
  • 账面余额与账面净值
  • mysql怎么使用索引
  • linux git教程
  • winpe安装
  • wcu.exe是什么
  • Win7任务栏时间显示秒
  • win10系统电脑无法开机怎么办
  • win7 64位旗舰版电脑中如何让EditPlus软件在保存文件时不生成bak文件?
  • cocos2dx怎么用啊
  • 好看的css样式代码
  • 梦见擦窗户框
  • flask开发实例
  • js数组如何定义
  • shell脚本自动化
  • 安卓两个app
  • 国税局和税务稽查的区别
  • 如何查询企业是否注销成功
  • 怎么注册山东省电子税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设