Vuejs仿網(wǎng)易云音樂(lè)實(shí)現(xiàn)聽(tīng)歌及搜索功能
前言
前端時(shí)間學(xué)了vue，一開(kāi)始看了vue1.0，后來(lái)實(shí)在覺(jué)得技術(shù)總得實(shí)踐，就直接上手vue2.0。然后花了將近一周時(shí)間做了一個(gè)網(wǎng)易云音樂(lè)的小項(xiàng)目。一開(kāi)始覺(jué)得項(xiàng)目比較小，沒(méi)必要用vuex所以就沒(méi)有使用，但是后來(lái)發(fā)現(xiàn)數(shù)據(jù)流傳輸有點(diǎn)麻煩，后續(xù)會(huì)使用vuex。
技術(shù)棧
vue+vue-router（核心框架）
better-scroll（使移動(dòng)端滑動(dòng)體驗(yàn)更加流暢）
vue-lazyload（用戶圖片懶加載）
nprogress（用于加載過(guò)渡）
axios（請(qǐng)求）
功能分析與設(shè)計(jì)
首先我先參考了現(xiàn)有的一些APP的設(shè)計(jì)與開(kāi)發(fā)，然后決定做了歌單和搜索兩個(gè)模塊，本身主要以前端為主，后端代碼并沒(méi)有研究，這里要感謝這位同學(xué)寫(xiě)的API。如果你沒(méi)有API也沒(méi)有關(guān)系，這并不影響我們的開(kāi)發(fā)，你可以寫(xiě)如下形式的json數(shù)據(jù)進(jìn)行模擬：
vuejs
路由結(jié)構(gòu)如下
以下是組件
1.歌單部分：
數(shù)據(jù)主要由API提供，源碼中有具體地址。需要了解audio標(biāo)簽，不熟悉的同學(xué)看audio
2.搜索部分：
通過(guò)綁定@keydown來(lái)綁定事件，實(shí)現(xiàn)實(shí)時(shí)查詢。
better-scroll
使用：
1.一定要用一個(gè)空層來(lái)承載
<div ref="helloWrapper"> <div> //你的代碼 </div> </div>
2.在vue中使用前必須引入
import BScroll from 'better-scroll';
this.helloScroll = new BScroll(this.$refs.helloWrapper, {
click: true
});
一定要在數(shù)據(jù)渲染完成后使用better-scroll，
this.$nextTick(() => {
//調(diào)用
});
最后上幾張效果圖
github項(xiàng)目地址：https://github.com/hua1995116/musiccloudWebapp/
在線演示地址：http://qiufengh.com:8080/
以上所述是小編給大家介紹的Vuejs仿網(wǎng)易云音樂(lè)實(shí)現(xiàn)聽(tīng)歌及搜索功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- vue插件開(kāi)發(fā)之使用pdf.js實(shí)現(xiàn)手機(jī)端在線預(yù)覽pdf文檔的方法
- vue項(xiàng)目實(shí)現(xiàn)github在線預(yù)覽功能
- vue translate peoject實(shí)現(xiàn)在線翻譯功能【新手必看】
- vue+socket.io+express+mongodb 實(shí)現(xiàn)簡(jiǎn)易多房間在線群聊示例
- 利用Vue.js實(shí)現(xiàn)求職在線之職位查詢功能
- 基于vue開(kāi)發(fā)的在線付費(fèi)課程應(yīng)用過(guò)程
- 實(shí)現(xiàn)Vue的markdown文檔可以在線運(yùn)行的方法示例
- vue實(shí)現(xiàn)的網(wǎng)易云音樂(lè)在線播放和下載功能案例
相關(guān)文章
vue中國(guó)城市選擇器的使用教程(element-china-area-data)
這篇文章主要給大家介紹了關(guān)于vue中國(guó)城市選擇器使用(element-china-area-data)的相關(guān)資料,使用element-china-area-data插件可以非常方便地實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)選擇器,需要的朋友可以參考下2023-11-11
vue通過(guò)watch對(duì)input做字?jǐn)?shù)限定的方法
本篇文章主要介紹了vue通過(guò)watch對(duì)input做字?jǐn)?shù)限定的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
Vue2.0 vue-source jsonp 跨域請(qǐng)求
這篇文章主要介紹了Vue2.0 vue-source jsonp 跨域請(qǐng)求，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
vue使用axios實(shí)現(xiàn)動(dòng)態(tài)追加數(shù)據(jù)
在vuejs中使用axios時(shí),有時(shí)候需要追加數(shù)據(jù),比如,移動(dòng)端下拉觸底加載,分頁(yè)加載,滑動(dòng)滾動(dòng)條等,下面小編就來(lái)為大家介紹一下如何使用使用axios實(shí)現(xiàn)動(dòng)態(tài)追加數(shù)據(jù)吧2023-10-10
這篇文章主要介紹了vue獲取input值的三種常用寫(xiě)法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
在Vue中實(shí)現(xiàn)對(duì)文件的壓縮和解壓縮功能
在前端開(kāi)發(fā)中,文件的壓縮和解壓縮是經(jīng)常需要用到的功能,尤其是在需要上傳和下載文件的場(chǎng)景下,文件壓縮可以減小文件大小,加快文件傳輸速度,提高用戶體驗(yàn),本文將介紹在Vue項(xiàng)目中如何進(jìn)行文件的壓縮和解壓縮,需要的朋友可以參考下2023-11-11
詳解使用jest對(duì)vue項(xiàng)目進(jìn)行單元測(cè)試
這篇文章主要介紹了詳解使用jest對(duì)vue項(xiàng)目進(jìn)行單元測(cè)試，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue3結(jié)合TypeScript項(xiàng)目開(kāi)發(fā)實(shí)踐總結(jié)
本文主要介紹了Vue3結(jié)合TypeScript項(xiàng)目開(kāi)發(fā)實(shí)踐總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vuejs2.0運(yùn)用原生js實(shí)現(xiàn)簡(jiǎn)單拖拽元素功能
這篇文章主要為大家詳細(xì)介紹了vuejs2.0運(yùn)用原生js實(shí)現(xiàn)簡(jiǎn)單拖拽元素功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了vue 獲取元素額外生成的data-v-xxx操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09