主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
如何实现小程序的常用搜索功能?下面这篇文章就带你一步步了解在小程序中实现搜索功能的方法,希望能帮到你!
在每个小程序开发的过程中,基本上都配备了搜索功能,那么相对智能的搜索功能是如何实现的呢?通过一段时间的学习,我已经学会了比较全面的搜索框功能。我们来看看吧!
开发准备微信小程序。展示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 <。计数= = 3 & amp& ampindex1 <。2 | | count = = 4 & amp& ampindex1 <。3){ id = & quot;item0 & quot;} console . log(& quot;下标”,索引1,& quot---分类id名称”,ID)这个。setdata ({scroll top: ID})},可以达到添加wxss后的效果。但是这样写有一个问题,就是显示的内容是偶数的时候,比如6,不能正确跳到中间,会跳到3的位置,所以有一点偏差。这个问题我还没解决。不知道有没有大佬知道怎么解决这个问题?
这里的源代码是项目的完整源代码,以上是部分代码。有兴趣的可以看看完整的源代码。
综上所述,这是我第一次写一个稍微完整的项目。这里主要介绍一下我在开发过程中遇到的主要困难。虽然总体上没有什么困难,但对我来说还是意义重大。有了这次经历,我发现我还有很多东西要学,也感谢在我困难的时候帮助我指导我的老师和同学。如果你觉得这篇文章到了你的地方,不妨给我一个赞,对我来说就太棒了。
更多编程相关知识,请访问:编程入门!!
这几篇文章你可能也喜欢:
- 详细讲解如何使用 taro-deploy 自动构建和发布 taro 小程序。
- 如何在小程序中打开支付功能(如何在小程序中打开支付)
- 微信小程序有几种推送消息的方式(微信小程序发送消息推送)。
- 了解小程序的无痕埋葬点(小程序埋葬点测试)
- 在小程序中优化css树抖动。
本文由主机参考刊发,转载请注明:小程序中实现搜索功能的方法深度讲解(小程序中实现搜索功能的方法深度讲解是) https://zhujicankao.com/112724.html
评论前必须登录!
注册