那些年，微信小程序仿网易云音乐有关实时搜索功能

发布日期： 2020-09-14 阅读量： 作者： 网络

相关学习推荐：微信小程序教程

前言

前段时间我的小伙伴已经将网易云音乐小程序的音乐播放功能详细的介绍出来了，作为前端小白学习了一段时间，最近也比较忙，没有及时将实时搜索这块内容及时写出来跟大家分享（其实代码和功能之前就写的差不多了），那么今天就给大家讲一讲个人在里面的一些细节和优化吧。

搜索功能很常见，很多地方都能用到，希望能够给大家分享到有用的东西，同时，有不足的地方，也希望各位大佬指出，给出一些修改的意见，小白在此感谢了！

实时搜索功能里面我们也需要用到API接口，从input框输入值到搜索建议，再到搜索结果，最后到跳转歌曲播放，不再只是接那么简单，传值很关键，同时不同功能下不同容器框的隐藏与显示，还有一些搜索当中涉及的细节内容和优化。让我们一起来看看吧！

头部搜索栏中：左边返回箭头，中间输入框，右边歌手排行榜页面跳转;至于清除按钮呢我们隐藏了起来，只有在输入输入值之后才会出现。

往下时历史记录，像每个搜搜的记录值这里都是一小块一小块等隔距离分布，搜索值有多长，这小块就有多长，这里用到的是display: flex;flex-wrap: wrap;，对这个界面样式感兴趣的小伙伴可以待会看看全部代码。

接下来是热搜榜，这里没有太多讲究，就是发起接口请求数据，把数据埋进去显示出来就行了。

搜索建议会在输入结束后才会出现，并且是很立体的一块覆盖在整个页面上，用box-shadow: 1px 1px 5px #888888达到立体效果，z-index起到覆盖的效果。

搜索结果会在点击搜索建议中的某一条或者点击搜索历史或者热搜才出现，同时界面上其他所有的容器快都会隐藏起来，这里其实就是一个容器框的隐藏与出现的小细节了，待会在功能中我们会详细讲到。这里我们先讲一下组件(容器)如何进行隐藏与显示，以免下面的功能中看到这几项内容蒙圈

几个容器的头部展示

<!-- 点击×可以清空正在输入 -->
<image class="{{showClean ? 'header_view_hide' : 'clean-pic'}}" src="../../image/search_delete.png" bindtap="clearInput" />复制代码