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

  • 在网络上开网店须知店面的注意原则(在网络上开网店真的那么赚钱吗?)

    在网络上开网店须知店面的注意原则(在网络上开网店真的那么赚钱吗?)

  • 小红书有没有电脑版(小红书有没有电话客服)

    小红书有没有电脑版(小红书有没有电话客服)

  • 华为p40能用钢化膜吗(华为p40能用钢化玻璃膜吗)

    华为p40能用钢化膜吗(华为p40能用钢化玻璃膜吗)

  • 超视网膜xdr和liquid区别

    超视网膜xdr和liquid区别

  • 通话音量关不彻底(通话音量打开)

    通话音量关不彻底(通话音量打开)

  • 注销账号显示非法请求(注销账号显示非法请求是犯法了吗)

    注销账号显示非法请求(注销账号显示非法请求是犯法了吗)

  • 添加到桌面怎么没显示不出来(添加到桌面怎么设置权限)

    添加到桌面怎么没显示不出来(添加到桌面怎么设置权限)

  • 为什么哈啰出行打不开(为什么哈啰出行开不了车)

    为什么哈啰出行打不开(为什么哈啰出行开不了车)

  • u盘根目录在哪(u盘的根目录是哪个)

    u盘根目录在哪(u盘的根目录是哪个)

  • 抖音企业认证和个人认证有什么区别(抖音企业认证和抖音小店)

    抖音企业认证和个人认证有什么区别(抖音企业认证和抖音小店)

  • 怎么设置没开通朋友圈(怎么设置没开通花呗功能)

    怎么设置没开通朋友圈(怎么设置没开通花呗功能)

  • 改用本地账户登录是什么意思(改用本地账户登录好不好)

    改用本地账户登录是什么意思(改用本地账户登录好不好)

  • ios中文字体叫什么(苹果手机中文是什么字体)

    ios中文字体叫什么(苹果手机中文是什么字体)

  • 手机出现volte什么意思(手机显示volte是什么)

    手机出现volte什么意思(手机显示volte是什么)

  • oppoa5怎么退出耳机模式(oppoa5手机怎样退出耳机模式)

    oppoa5怎么退出耳机模式(oppoa5手机怎样退出耳机模式)

  • 小米手环4首次充电冲多久(小米手环首次激活时间查询)

    小米手环4首次充电冲多久(小米手环首次激活时间查询)

  • 京东超市如何加盟(京东超市怎么加盟赚钱么)

    京东超市如何加盟(京东超市怎么加盟赚钱么)

  • 转账后拉黑能收钱吗(转账拉黑还能收吗)

    转账后拉黑能收钱吗(转账拉黑还能收吗)

  • qq怎么和好友有互赞图标(qq怎么和好友聊天)

    qq怎么和好友有互赞图标(qq怎么和好友聊天)

  • 腾讯视频怎么开启儿童模式(腾讯视频怎么开4k画质)

    腾讯视频怎么开启儿童模式(腾讯视频怎么开4k画质)

  • word图片怎么对齐(word图片对齐)

    word图片怎么对齐(word图片对齐)

  • alm红灯什么意思(alm灯红色)

    alm红灯什么意思(alm灯红色)

  • 这可能是最好、最详细的VSCode开发uni-app教程吧(这可能是最好的144平米小平层户型)

    这可能是最好、最详细的VSCode开发uni-app教程吧(这可能是最好的144平米小平层户型)

  • DeepSort目标跟踪算法(deepsort 跟踪)

    DeepSort目标跟踪算法(deepsort 跟踪)

  • Python解析nginx日志示例(nginx运行python)

    Python解析nginx日志示例(nginx运行python)

  • 电费发票隔月开如何做账
  • 私车公用报销流程怎么写
  • 一般纳税人结转销售成本怎么算
  • 银行存款产生的利息怎么写分录
  • 宣传费属于什么税目
  • 房地产公司资本公积
  • 私人企业利润怎么分配?
  • 退回多打货款分录
  • 违约金收入需要缴纳印花税吗
  • 有限合伙企业合伙人分红纳税
  • 建筑业未开票收入情况说明
  • 小规模纳税人实收资本印花税如何交
  • 财务软件怎样结转销售成本
  • 免抵退办法出口销售额和免税销售额的区别
  • 小规模不动产租赁税率是否减按1%
  • 房租发票进项税可以抵扣吗
  • 增值税扣税项目
  • 应收账款手工核算方法
  • 其他应付款坏账怎么处理
  • 增值纳税人类别怎么选
  • 为职工垫付的款项属于其他应收款吗
  • 工会委员会开票信息
  • 机动车检测工作
  • windows7中右键的作用
  • 计提长期债券利息分录
  • win10安装版u盘安装
  • 个人所得税专项扣除夫妻双方都填吗?
  • mac如何关闭开机启动
  • 委托外单位加工发出的材料分录
  • php生成二维码
  • 一条指令可以完成一项复杂任务吗
  • framework怎么用
  • php sql 教程
  • 业务招待费的企业是什么
  • html用户注册界面
  • 元宇宙区块链数字货币
  • 字节在互联网什么地位
  • mongodb4.4安装
  • vue如何使用axios
  • yum命令详解
  • 增值税附加税有哪几种
  • 修改Dede默认投票代码 防止Request Error错误
  • sqlserver2005使用
  • 加强mysql安全
  • 对企业发票的监管
  • 营业税改征增值税跨境应税行为增值税免税管理办法
  • 发票红冲重开是退个税吗
  • 普通发票冲红重开要多久
  • 工资及福利费科目
  • 收取客户好处算违法吗
  • 预付账款主要是什么
  • 建筑会计账务
  • mysql优化表命令
  • mysql免安装版怎么使用
  • windows service 2003
  • linux系统的电脑如何共享
  • 电脑图片密码是什么意思
  • 笔记本win8.1怎么重装系统
  • linux 安装jmap
  • win10系统怎么刻录光盘?win10刻录光盘详细图文步骤
  • Windows环境下搭建Python开发环境的方法
  • div+css布局的步骤
  • opengl绘制函数
  • 使用文字输入
  • net user %username%
  • 基于JAVASCRIPT实现的可视化工具是
  • cshrc语法
  • 一个页面
  • angular创建service
  • python裁剪不规则区域
  • python3的urllib
  • json python 字段读取
  • android 标签栏
  • 国家税务总局全国增值税查询
  • 财税专家刘杨简历图片介绍
  • 12123怎么上传交强险
  • 企业补缴公积金 归集额增加
  • 销售皮棉税率为多少
  • 北京税务迁址流程是什么
  • 河南省土地使用税减免税优惠
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设