溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“微信小程序音樂播放器的檢索頁如何制作”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
這個函數很簡單，我們在寫歷史記錄頁面時，已經用到了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
}
},
“微信小程序音樂播放器的檢索頁如何制作”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
