微信小程序音乐播放器的检索页如何制作
本篇内容介绍了"微信小程序音乐播放器的检索页如何制作"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
这个函数很简单，我们在写历史记录页面时，已经用到了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 < historySearchs.length; 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
}
},
"微信小程序音乐播放器的检索页如何制作"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！
