摘要:這邊忙完了會(huì)首先把滾輪實(shí)現(xiàn)思路跟大家講一下滾輪實(shí)現(xiàn)思路展示音樂(lè)播放器優(yōu)化滾輪性能優(yōu)化自定義指令自定義
先上最終效果地址
PC 開(kāi)啟手機(jī)瀏覽器模式
從vue2.0 開(kāi)始接觸,然后一邊看官網(wǎng)教程一邊寫(xiě)demo,
主要實(shí)現(xiàn)以下
PC端 時(shí)間選擇插件 【涉及 props, watch, mounted,transaction內(nèi)置組件 和組件開(kāi)發(fā)熟悉】 demo
移動(dòng)端 仿IOS滾輪 時(shí)間選擇 【涉及 $el, $nextick touch 事件等】demo
全局組件 加載框 彈出對(duì)話框【涉及 vuex,回調(diào), 組件內(nèi)的事件分發(fā)dispatch 】
QQ音樂(lè)播放器 【涉及 html5>audio 移動(dòng)端適配 vue-router 嵌套路由 參數(shù)路由 動(dòng)態(tài)更改index.html title ajax 復(fù)雜組件開(kāi)發(fā) vuex 單向事件】demo
具體代碼請(qǐng)查看,歡迎關(guān)注https://github.com/k186/vueDemo 切到likeMusicplayer 分支
上面是用官方Vue-cli 構(gòu)建的,最近幾天在看webpack2 準(zhǔn)備自己配置打包。 這邊忙完了會(huì)首先把滾輪實(shí)現(xiàn)思路跟大家講一下 //todo 1.滾輪實(shí)現(xiàn)思路展示 2.音樂(lè)播放器 vuex 優(yōu)化 3.滾輪性能優(yōu)化 4.自定義指令 tap 5.自定義scroll
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/81907.html
摘要:關(guān)于路由,剛開(kāi)始設(shè)計(jì)路由的時(shí)候想了很多,由于一開(kāi)始的目標(biāo)就是網(wǎng)易云音樂(lè)的所有內(nèi)容,所以設(shè)計(jì)了三級(jí)路由,,大概這樣,點(diǎn)擊查看。 標(biāo)題略夸張了,但是這個(gè)從ui還原上已經(jīng)很接近官方版本了。雖然目前這個(gè)是很多人造過(guò)的輪子,但是可能每個(gè)人的實(shí)現(xiàn)方式都不一樣,自己寫(xiě)一遍也會(huì)有許多收獲。 項(xiàng)目地址 預(yù)覽地址 api:ap使用的是一個(gè)開(kāi)源的nodejs封裝的網(wǎng)易云音樂(lè)api,地址 技術(shù)棧 vue...
摘要:簡(jiǎn)介最近有點(diǎn)小閑置,于是乎希望寫(xiě)點(diǎn)東西,正好自己喜歡聽(tīng)歌,便決定自己寫(xiě)一個(gè)音樂(lè)的簡(jiǎn)易版。核心文件則是在在這里使用統(tǒng)一管理頁(yè)面切換動(dòng)畫(huà),歌曲播放狀態(tài),歌曲進(jìn)度等信息。所有對(duì)于歌曲的操作都通過(guò)來(lái)進(jìn)行全局管理,然后對(duì)相應(yīng)的變化做出全局改變。 Vue-QQMusic 簡(jiǎn)介: 最近有點(diǎn)小閑置,于是乎希望寫(xiě)點(diǎn)東西,正好自己喜歡聽(tīng)歌,便決定自己寫(xiě)一個(gè)QQ音樂(lè)的簡(jiǎn)易版。順便進(jìn)一步加深下自己對(duì)移動(dòng)端的知...
摘要:庫(kù)用了魔改樣式的歌詞滾動(dòng)部分用了黃軼老大的賊爽主題換膚用的變量替換。語(yǔ)言的下一代標(biāo)準(zhǔn)預(yù)處理器安裝與使用前端項(xiàng)目后端項(xiàng)目 音樂(lè)播放器雖然爛大街了,但是作為前端沒(méi)自己擼一個(gè)一直是個(gè)遺憾,而且偶然間發(fā)現(xiàn)pc端web版的網(wǎng)易云音樂(lè)做的實(shí)在是太簡(jiǎn)陋了,社區(qū)仿pc客戶端的網(wǎng)易云也不多見(jiàn),為了彌補(bǔ)這個(gè)遺憾,就用vue全家桶模仿mac客戶端的ui實(shí)現(xiàn)了一個(gè),歡迎提出意見(jiàn)和star~ 預(yù)覽地址 源碼地址...
摘要:基于等開(kāi)發(fā)一款移動(dòng)端音樂(lè),界面參考了安卓版的網(wǎng)易云音樂(lè)布局適配常見(jiàn)移動(dòng)端。圖標(biāo)使用阿里巴巴圖標(biāo)庫(kù),中間的唱片旋轉(zhuǎn)動(dòng)畫(huà)使用了實(shí)現(xiàn)。搜索功能實(shí)現(xiàn)功能搜索歌手歌單歌曲熱門(mén)搜索數(shù)據(jù)節(jié)流上拉刷新保存搜索記錄。 基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等開(kāi)發(fā)一款移動(dòng)端音樂(lè) WebApp,UI ...
閱讀 1014·2021-11-22 14:56
閱讀 975·2021-11-11 16:54
閱讀 7554·2021-09-23 11:55
閱讀 3000·2021-09-22 15:57
閱讀 2787·2021-08-27 16:25
閱讀 667·2019-08-30 15:55
閱讀 1657·2019-08-30 15:43
閱讀 1592·2019-08-30 14:23