微信小程序音乐播放器的检索页如何制作

本篇内容介绍了“微信小程序音乐播放器的检索页如何制作”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！　　这个函数很简单，我们在写历史记录页面时，已经用到了historySearchs这个数组，所以添加时我们只有获取这个数组，然后将要添加的词push到数组里，然后用setData更新页面就可以了。addHistorySearchs: function (key) { var historySearchs = this.data.historySearchs; historySearchs.push(key); this.setData({ historySearchs: historySearchs }) },复制代码　　但是这样做的问题是当用户多次搜索相同内容时，数组内就会多次加入同样的词，导致我们的历史记录列表里出现重复内容，这显然是不合理的，所以我们在每次push前，需要判断数组内是否已经含有这个词。findHistorySearchs: function (key) { var historySearchs = this.data.historySearchs; for (var i = 0; i if (historySearchs[i] == key) { return false; } } return true; },　　创建新的函数，这个函数会遍历historySearchs数组，如果存在相同项则返回false，没有相同的返回true。　　然后我们更改我们的addHistorySearchs方法：addHistorySearchs: function (key) { var historySearchs = this.data.historySearchs; if (this.findHistorySearchs(key)) { historySearchs.push(key); this.setData({ historySearchs: historySearchs }) } },　　有个这个方法后，我们开始逐条完成我们的事件代码。　　　　将所有更新页面有关变量添加到data里：data: { slider: [], indicatorDots: true, autoplay: true, interval: 5000, duration: 1000, radioList: [], currentView: 1, topList: [], hotkeys: [], showSpecial: false, special: { key: ”, url: ” }, searchKey: ”, searchSongs: [], zhida: {}, showSearchPanel: 1, historySearchs: [], },　　热门关键词的点击事件：hotKeysTap: function (e) { var dataSet = e.currentTarget.dataset; var key = dataSet.key; //获取点击的关键词 var self = this; if (key != ”) { //判断是否为空 self.addHistorySearchs(key); //调用我们写好的方法，加入历史记录 self.setData({ searchKey: key, //为输入框内添加文字 showSearchPanel: 3, //显示内容切换为搜索结果 }); MusicService.getSearchMusic(key, function (data) { //请求网络数据 if (data.code == 0) { var songData = data.data; self.setData({ //将获得的数据添加到相应数组里 searchSongs: songData.song.list, zhida: songData.zhida }); } }); } },　　输入框获取焦点事件：bindFocus: function (e) { var self = this; if (this.data.showSearchPanel == 1) { //判断内容是否为热门关键词 self.setData({ showSearchPanel: 2 //切换到历史记录 }) } },　　历史记录文字的点击事件：historysearchTap: function (e) { var dataSet = e.currentTarget.dataset; var key = dataSet.key; //获取点击的历史记录文字 var self = this; self.setData({ searchKey: key, //输入框添加文字 showSearchPanel: 3 //显示搜索结果 }); MusicService.getSearchMusic(key, function (data) { //请求网络，获取搜索结果 if (data.code == 0) { var songData = data.data; self.setData({ searchSongs: songData.song.list, zhida: songData.zhida }); } }); },　　历史记录结尾的“X”与“清除历史记录”的点击事件： 免费云主机域名delHistoryItem: function (e) { var historySearchs = this.data.historySearchs; var dataSet = e.currentTarget.dataset; //获取点击的条目 if (dataSet.index != ‘undefined’) { var _index = parseInt(dataSet.index); //获取点击条目为数组的第几项 historySearchs.splice(_index, 1); //从数组里删除对应的条目 this.setData({ //更新页面 historySearchs: historySearchs }); if(historySearchs.length==0){ //如果历史记录里没有数据了 this.setData({ showSearchPanel: 1 //切换到热门关键字 }) } } }, clearHistorySearchs: function () { this.setData({ historySearchs: [], //清空历史记录数组 showSearchPanel: 1 //切换到热门关键字 }) },　　输入框输入事件：bindKeyInput: function (e) { var self = this; self.setData({ //更新searchKey的值 searchKey: e.detail.value }); if (e.detail.value == “”) { //如果值为空且当前未显示热门关键字 if (this.data.showSearchPanel != 1) { self.setData({ showSearchPanel: 1 //切换为热门关键字 }) } } },　　确认按钮的点击事件：searchOk: function (e) { var self = this; var searchKey = this.data.searchKey; //获取searchKey的值 if (searchKey != “”) { self.setData({ showSearchPanel: 3 //显示搜索结果 }); self.addHistorySearchs(searchKey); //添加到历史记录 MusicService.getSearchMusic(searchKey, function (data) { if (data.code == 0) { var songData = data.data; self.setData({ searchSongs: songData.song.list, zhida: songData.zhida }); } }); } },　　搜索结果item的点击事件,分为专辑与歌曲两种： zhidaTap: function (e) { //专辑的跳转事件 var dataSet = e.currentTarget.dataset; var mid = dataSet.id;
app.setGlobalData({ ‘zhidaAlbummid’: mid }); //将专辑id保存为全局变量 wx.navigateTo({ //页面跳转 url: ‘../cdinfo/cdinfo’ })
}, musuicPlay: function (e) { //歌曲的跳转事件 var dataSet = e.currentTarget.dataset; //TODO } },“微信小程序音乐播放器的检索页如何制作”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注百云主机网站，小编将为大家输出更多高质量的实用文章！

相关推荐: Ubuntu如何转换文件名由GBK为UTF8

这篇文章给大家分享的是有关Ubuntu如何转换文件名由GBK为UTF8的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。Ubuntu简介Ubuntu是一个以桌面应用为主的Linux操作系统，其名称来自非洲南部祖鲁语或豪萨语的“ubunt…