10.4.5 检索页 （下）
到目前为止，我们已经完成了检索页所有的布局和格式文件，也完成了所有的数据请求函数，现在我们需要将这些串联起来，实现这三部分间的切换。
总结一下我们需要完成的逻辑有：
- 点击热门关键字，页面内容变成搜索结果页（需要请求网络，用我们写好的getSearchMusic方法），输入框内显示点击的关键字，同时这个关键字加入历史搜索结果。
- 在页面内容为热门关键字的时候，点击输入框使其获得焦点时，页面内容变成历史记录。
- 点击历史记录文字，内容变成搜索结果（请求网络），输入框显示这个记录。
- 点击历史记录每条末尾的“X”，删除这一条记录，当所有记录全部删除或点击了“清除历史记录”选项，内容变为热门关键字。
- 输入框内的内容被全部删除后，也返回热门关键字。
- 点击确认按钮，内容变为搜索结果页，同时加入历史记录。
- 点击搜索结果的item，页面转到专辑页或音乐播放页。
实现这些逻辑的相关事件我们已经在页面里注册好了，在具体实现这些事件之前，我们先写一个函数——将字符串加入到历史记录。
这个函数很简单，我们在写历史记录页面时，已经用到了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
}
},
歌曲的跳转事件相对复杂（不只是要跳转，而且要加入播放列表），我们留到播放页再更改这部分吧。
至此，首页内容全部完成（准确的说还缺少推荐页与搜索结果页向音乐播放页跳转的事件）。