微信小程序音樂(lè)播放器的檢索頁(yè)如何制作

本篇內(nèi)容介紹了“微信小程序音樂(lè)播放器的檢索頁(yè)如何制作”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

　　這個(gè)函數(shù)很簡(jiǎn)單，我們?cè)趯?xiě)歷史記錄頁(yè)面時(shí)，已經(jīng)用到了historySearchs這個(gè)數(shù)組，所以添加時(shí)我們只有獲取這個(gè)數(shù)組，然后將要添加的詞push到數(shù)組里，然后用setData更新頁(yè)面就可以了。

1. addHistorySearchs: function (key) {

2.         var historySearchs = this.data.historySearchs;

3.             historySearchs.push(key);

4.             this.setData({

5.                 historySearchs: historySearchs

6.             })

7.     },

復(fù)制代碼

　　但是這樣做的問(wèn)題是當(dāng)用戶多次搜索相同內(nèi)容時(shí)，數(shù)組內(nèi)就會(huì)多次加入同樣的詞，導(dǎo)致我們的歷史記錄列表里出現(xiàn)重復(fù)內(nèi)容，這顯然是不合理的，所以我們?cè)诿看蝡ush前，需要判斷數(shù)組內(nèi)是否已經(jīng)含有這個(gè)詞。

1. findHistorySearchs: function (key) {

2.         var historySearchs = this.data.historySearchs;

3.         for (var i = 0; i < historySearchs.length; i++) {

4.             if (historySearchs[i] == key) { return false; }

5.         }

6.         return true;

7.     },

　　創(chuàng)建新的函數(shù)，這個(gè)函數(shù)會(huì)遍歷historySearchs數(shù)組，如果存在相同項(xiàng)則返回false，沒(méi)有相同的返回true。

　　然后我們更改我們的addHistorySearchs方法：

1. addHistorySearchs: function (key) {

2.         var historySearchs = this.data.historySearchs;

3.         if (this.findHistorySearchs(key)) {

4.             historySearchs.push(key);

5.             this.setData({

6.                 historySearchs: historySearchs

7.             })

8.         }

9.     },

　　有個(gè)這個(gè)方法后，我們開(kāi)始逐條完成我們的事件代碼。

　　將所有更新頁(yè)面有關(guān)變量添加到data里：

1. data: {

2.         slider: [],

3.         indicatorDots: true,

4.         autoplay: true,

5.         interval: 5000,

6.         duration: 1000,

7.         radioList: [],

8.         currentView: 1,

9.         topList: [],

10.         hotkeys: [],

11.         showSpecial: false,

12.         special: { key: '', url: '' },

13.         searchKey: '',

14.         searchSongs: [],

15.         zhida: {},

16.         showSearchPanel: 1,

17.         historySearchs: [],

18.     },

　　熱門關(guān)鍵詞的點(diǎn)擊事件：

1. hotKeysTap: function (e) {

2.         var dataSet = e.currentTarget.dataset;

3.         var key = dataSet.key;                           //獲取點(diǎn)擊的關(guān)鍵詞

4.         var self = this;              

5.         if (key != '') {                                 //判斷是否為空

6.             self.addHistorySearchs(key);                 //調(diào)用我們寫(xiě)好的方法，加入歷史記錄

7.             self.setData({

8.                 searchKey: key,                          //為輸入框內(nèi)添加文字

9.                 showSearchPanel: 3,                       //顯示內(nèi)容切換為搜索結(jié)果

10.             });

11.             MusicService.getSearchMusic(key, function (data) {         //請(qǐng)求網(wǎng)絡(luò)數(shù)據(jù)

12.                 if (data.code == 0) {

13.                     var songData = data.data;

14.                     self.setData({                                //將獲得的數(shù)據(jù)添加到相應(yīng)數(shù)組里

15.                         searchSongs: songData.song.list,               

16.                         zhida: songData.zhida

17.                     });

18.                 }

19.             });

20.         }

21.     },

　　輸入框獲取焦點(diǎn)事件：

1. bindFocus: function (e) {

2.         var self = this;

3.         if (this.data.showSearchPanel == 1) {      //判斷內(nèi)容是否為熱門關(guān)鍵詞

4.             self.setData({

5.                 showSearchPanel: 2                  //切換到歷史記錄

6.             })

7.         }

8.     },

　　歷史記錄文字的點(diǎn)擊事件：

1. historysearchTap: function (e) {

2.         var dataSet = e.currentTarget.dataset;

3.         var key = dataSet.key;                        //獲取點(diǎn)擊的歷史記錄文字

4.         var self = this;

5.         self.setData({                                   

6.             searchKey: key,                          //輸入框添加文字

7.             showSearchPanel: 3                        //顯示搜索結(jié)果

8.         });

9.         MusicService.getSearchMusic(key, function (data) {     //請(qǐng)求網(wǎng)絡(luò)，獲取搜索結(jié)果

10.             if (data.code == 0) {

11.                 var songData = data.data;

12.                 self.setData({

13.                     searchSongs: songData.song.list,

14.                     zhida: songData.zhida

15.                 });

16.             }

17.         });

18.     },

　　歷史記錄結(jié)尾的“X”與“清除歷史記錄”的點(diǎn)擊事件：

1.     delHistoryItem: function (e) {

2.         var historySearchs = this.data.historySearchs;

3.         var dataSet = e.currentTarget.dataset;                 //獲取點(diǎn)擊的條目

4.         if (dataSet.index != 'undefined') {                    

5.             var _index = parseInt(dataSet.index);              //獲取點(diǎn)擊條目為數(shù)組的第幾項(xiàng)

6.             historySearchs.splice(_index, 1);                  //從數(shù)組里刪除對(duì)應(yīng)的條目

7.             this.setData({                                    //更新頁(yè)面

8.                 historySearchs: historySearchs

9.             });

10.             if(historySearchs.length==0){                     //如果歷史記錄里沒(méi)有數(shù)據(jù)了

11.                 this.setData({

12.                     showSearchPanel: 1                        //切換到熱門關(guān)鍵字

13.                 })

14.             }

15.         }

16.     },

17.     clearHistorySearchs: function () {               

18.         this.setData({

19.             historySearchs: [],                               //清空歷史記錄數(shù)組

20.             showSearchPanel: 1                                //切換到熱門關(guān)鍵字

21.         })

22.     },

　　輸入框輸入事件：

1. bindKeyInput: function (e) {

2.         var self = this;

3.         self.setData({                                        //更新searchKey的值

4.                 searchKey: e.detail.value

5.             });

6.         if (e.detail.value == "") {                           //如果值為空且當(dāng)前未顯示熱門關(guān)鍵字

7.             if (this.data.showSearchPanel != 1) {

8.                 self.setData({

9.                     showSearchPanel: 1                       //切換為熱門關(guān)鍵字

10.                 })

11.             }

12.         }

13.     },

　　確認(rèn)按鈕的點(diǎn)擊事件：

1. searchOk: function (e) {

2.         var self = this;

3.         var searchKey = this.data.searchKey;                   //獲取searchKey的值

4.         if (searchKey != "") {

5.             self.setData({

6.                 showSearchPanel: 3                            //顯示搜索結(jié)果

7.             });

8.             self.addHistorySearchs(searchKey);                  //添加到歷史記錄

9.             MusicService.getSearchMusic(searchKey, function (data) {

10.                 if (data.code == 0) {

11.                     var songData = data.data;

12.                     self.setData({

13.                         searchSongs: songData.song.list,

14.                         zhida: songData.zhida

15.                     });

16.                 }

17.             });

18.         }

19.     },

　　搜索結(jié)果item的點(diǎn)擊事件,分為專輯與歌曲兩種：

1.     zhidaTap: function (e) {                           //專輯的跳轉(zhuǎn)事件

2.         var dataSet = e.currentTarget.dataset;

3.         var mid = dataSet.id;

4.  

5.         app.setGlobalData({ 'zhidaAlbummid': mid });     //將專輯id保存為全局變量

6.         wx.navigateTo({                                //頁(yè)面跳轉(zhuǎn)

7.             url: '../cdinfo/cdinfo'

8.         })

9.  

10.     },

11.     musuicPlay: function (e) {                   //歌曲的跳轉(zhuǎn)事件

12.         var dataSet = e.currentTarget.dataset;

13.         //TODO

14.         }

15.     },

“微信小程序音樂(lè)播放器的檢索頁(yè)如何制作”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！