小程序中实现搜索功能的方法深度讲解（小程序中实现搜索功能的方法深度讲解是）

如何实现小程序的常用搜索功能？下面这篇文章就带你一步步了解在小程序中实现搜索功能的方法，希望能帮到你！

在每个小程序开发的过程中，基本上都配备了搜索功能，那么相对智能的搜索功能是如何实现的呢？通过一段时间的学习，我已经学会了比较全面的搜索框功能。我们来看看吧！

开发准备微信小程序。展示vant组件库的效果。我们先来看看效果。

提前准备好云数据库导入一些数据来测试搜索框功能。

实现目录下三个新页面的创建。

索引用作搜索框的首页。

搜索用于特定搜索的页面。

Hotsearch是搜索内容的详细页面。

首先，我们来看看搜索框首页的索引布局。这里主要介绍搜索框的内容，下面的内容这里不再赘述。

这是index.wxml的代码

& ltview class = & quot搜索_ 1 & quotbindtap = & quotgotoSearch & quot& gt& ltvan-搜索占位符= & quot搜索项目" disabled/>；& lt/view & gt；& ltview class = & quot搜索_ 2 & quot& gt& ltview class = & quotpic & quotbindtap = & quot列表& quot& gt& ltimage src = & quot"& gt& lt/image & gt；& lt/view & gt；& lt/view & gt；& lt/view & gt；

这是搜索框的search.wxml代码。

& ltview class = & quotdewu -搜索& quot& gt& ltview class = & quotreturn & quot& gt& ltview class = & quotreturn _ pic & quotbindtap = & quotgotoindex & quot& gt& ltimage src = & quot"& gt& lt/image & gt；& lt/view & gt；& ltview class = & quottxt & quot& gt搜索

const db = wx . cloud . database()；const dewuCollection = db . collection(& amp；#39;吴德& amp#39;);要在输入框变化时弹出相关内容，需要两个页面。当输入框中有内容输入时，显示隐藏页面。{{issuggest==false？隐藏“:”} } & quot判断是否会出现相关的内容页面，使用indexOf判断云数据库中是否存在e.detail(输入框内容)，如果存在，那么将这个数据存储在一个数组中，连接上一次搜索后的数组，然后使用wx . setstoragesync()；将输入框中的数据保存到存储器中，然后从wx.getStorageSync()中提取数据。

这是当输入框中有数据时，会弹出详情页。点击跳转到产品的详细信息页面。

这是搜索框的逻辑

if(e.detail.length！= 0){ this . setdata({ issuggest:true，}) var arr =

Wx.navigateTo可用于跳转到详细页面，添加字符串模板，判断id的值，用数据驱动页面，跳转到不同数据的同一页面。

wx . navigate to({ URL:` 0../hotsearch/hotsearch？Id=`+id})最后，更新数据。

wx . show loading({ title:& amp；#39;数据加载...&;#39;，})setTimeout(()= & gt；{ wx . hide loading()this . setdata({ goods nav:nav，goodsList:List，recommend:List，goods 2:this . data . history List })}，1000)// console.log(goodsList，& amp#39;= = = = = = = = = = = & amp#39;);}，注意不要忘记引入要在全局json或局部页面json中使用的组件的地址。

"使用组件& quot:{ & quotvan-搜索& quot:& quot。/mini program _ NPM/@ vant/weapp/search/index & quot；}，扩展自动跳转到导航栏中间的功能也是相当常见的。

这是wxml代码，最重要的是scroll -x = & quot；true & quot让导航栏水平滑动scroll -with -animation = & quot；true & quot是动画幻灯片，滚动-到-视图= & quot{ { scrollTop } } & quot

& ltscroll -view scroll -x = & quot；true & quotscroll -with -animation = & quot；true & quotstyle = & quot宽度:100%；"class = & quotscroll -view _ H & quot；scroll -into -view = & quot；{ { scrollTop } } & quot& gt& lt查看wx:for = & quot；{ { goodsNav } } & quotwx:key = & quot；索引& quotid = & quot{ { item.id } } & quotdata -index = & quot；{ { index } } & quotdata -type = & quot；{ { item.type } } & quotbindtap = & quot改变商品& quotclass = & quotscroll -view -item _ H { { activenaviindex = = index？& amp#39;主动& amp#39;:& amp#39;& amp#39;} } & quot& gt& lttext & gt{ { item.text } } & lt/text & gt；& lt/view & gt；& lt/scroll -view & gt；& lt/view & gt；这是事件let {index，type} = e.currenttarget.dataset绑定到导航栏；提取索引和类型，然后设置一个计数作为前几个不动，然后拼接到id，将id的值传递给scrollTop，让导航栏跳转到scrollTop的值，这个值在中间。

console . log(e)；设{index，type } = e . current target . dataset；控制台. log(& quot；index = & quot+index，& quottype = & quot+类型)；this . setdata({ activenaviindex:index })if(type = = & amp；#39;推荐& amp#39;){ this . setdata({ goods list:this . data . recommend })} else { let goods = this . data . recommend . filter((好)= & gtgood . camptype = = type)this . setdata({ goods list:goods })//console . log(this . data . goods)} var index 1 = e . current target . dataset . index；var count = 2；var id = & quotitem & quot+(索引1-计数)；//拼接id if(count = = 2 &；& ampindex1 &lt。计数= = 3 & amp& ampindex1 &lt。2 | | count = = 4 & amp& ampindex1 &lt。3){ id = & quot；item0 & quot；} console . log(& quot；下标”，索引1，& quot---分类id名称”，ID)这个。setdata ({scroll top: ID})}，可以达到添加wxss后的效果。但是这样写有一个问题，就是显示的内容是偶数的时候，比如6，不能正确跳到中间，会跳到3的位置，所以有一点偏差。这个问题我还没解决。不知道有没有大佬知道怎么解决这个问题？

这里的源代码是项目的完整源代码，以上是部分代码。有兴趣的可以看看完整的源代码。

综上所述，这是我第一次写一个稍微完整的项目。这里主要介绍一下我在开发过程中遇到的主要困难。虽然总体上没有什么困难，但对我来说还是意义重大。有了这次经历，我发现我还有很多东西要学，也感谢在我困难的时候帮助我指导我的老师和同学。如果你觉得这篇文章到了你的地方，不妨给我一个赞，对我来说就太棒了。

更多编程相关知识，请访问:编程入门！！

这几篇文章你可能也喜欢：

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

本文由主机参考刊发，转载请注明：小程序中实现搜索功能的方法深度讲解（小程序中实现搜索功能的方法深度讲解是） https://zhujicankao.com/112724.html