1载城、header組件的開發(fā)

1）樣式

2）先引用組件m-header組件

2）除了css樣式以外

2、路由及導(dǎo)航欄（css忽略）

1）配置路由费就，在index.js里诉瓦，一共有4個(gè)路由組件，引用及掛載力细。

2）導(dǎo)航欄的制作以及引用

3睬澡、封裝jsonp

1）先添加依賴以及安裝

2）建立一個(gè)jsonp.js然后完場(chǎng)url的拼接和jsonp的封裝

4、recommend組件的制作(slider組件的自作)

1）樣式

yan

2）獲取輪播圖數(shù)據(jù)

3）建立slider組件

實(shí)現(xiàn)途徑：使用better-scroll插件來實(shí)現(xiàn)滾動(dòng)原理

實(shí)現(xiàn)原理：1眠蚂、先計(jì)算整個(gè)slider-group的總寬度煞聪，以及給每一個(gè)子元素遍歷樣式，addClass是自己封裝的基本js函數(shù)逝慧。用于class的添加

2昔脯、應(yīng)用better-scroll插件

3、添加按鈕和按鈕的active樣式（定義一個(gè)currentPageIndex數(shù)據(jù)笛臣，用于判斷是否添加active樣式）

4云稚、利用索引關(guān)聯(lián)頁(yè)面與按鈕，關(guān)聯(lián)的時(shí)機(jī)實(shí)在滾動(dòng)結(jié)束后

5沈堡、增加定時(shí)器静陈，使其自動(dòng)進(jìn)行頁(yè)面跳轉(zhuǎn)，在滑動(dòng)結(jié)束后诞丽，繼續(xù)自動(dòng)播放窿给，在滑動(dòng)開始前清除一遍計(jì)時(shí)器贵白。

6、當(dāng)視口發(fā)生改變時(shí)崩泡，重新計(jì)算圖片寬度及slider-group寬度

7禁荒、在組件激活，組件停用角撞，實(shí)例銷毀之前停用定時(shí)器

5呛伴、獲取歌單數(shù)據(jù)（axios應(yīng)用）

6、歌單制作（css不展示）

7谒所、scroll組件的制作

1热康、template模塊，用了slot插槽劣领，可以忘里面添加內(nèi)容

2姐军、先定義幾個(gè)可能要傳入的數(shù)據(jù)

8、loading組件的制作

1尖淘、template模板

2奕锌、定義一個(gè)可能傳入的props

9、歌手頁(yè)面的數(shù)據(jù)獲取

因?yàn)楦枋猪?yè)面數(shù)據(jù)為jsonp的格式村生，所以用jsonp來獲取

10惊暴、拆分和合并所需的數(shù)據(jù)

1）定義一個(gè)_normalList方法，把數(shù)據(jù)整理成每個(gè)具有title數(shù)據(jù)格式的列表趁桃，然后再將數(shù)據(jù)做排序得到便于遍歷的數(shù)據(jù)列表

2）歌手頁(yè)面數(shù)據(jù)的獲取

11辽话、listView組件的頁(yè)面部分編輯

1）頁(yè)面樣子

2）template部分，在最外圍引用了scroll組件

3）引用歌手的數(shù)據(jù)

12卫病、listview的shortcut側(cè)欄的編輯

1）template部分

2）引用數(shù)據(jù)的計(jì)算

13油啤、左右聯(lián)動(dòng)的實(shí)現(xiàn)

實(shí)現(xiàn)這部分的主要邏輯分兩塊

1）視口欄改變，影響shortcut的樣式

⑴先在滾動(dòng)事件中監(jiān)聽滾動(dòng)事件蟀苛，實(shí)時(shí)輸出scrollY

⑵在將列表的高度計(jì)算出來村砂，每一塊的上下限，以便與計(jì)算scrollY落在哪個(gè)區(qū)域

⑶判斷scrollY落在哪個(gè)區(qū)域屹逛，并對(duì)其做邊界處理础废，在設(shè)置一個(gè)：class來判斷是否高亮

2）shortcut上面移動(dòng)，視口相應(yīng)發(fā)生變化

⑴給shortcut部分加上touchstart事件和touchmove事件

⑵給兩個(gè)事件添加計(jì)算方法罕模，第一個(gè)是touchstart的方法评腺，利用根據(jù)索引值的變化來控制頁(yè)面的跳轉(zhuǎn)，利用scroll中的scrollToElement方法

⑶第二個(gè)是touchmove的方法淑掌，第一個(gè)的方法蒿讥。計(jì)算出shortcut的移動(dòng)變化的索引值對(duì)應(yīng)到視口上的寬度，來計(jì)算move所需滾動(dòng)的距離

⑷滾動(dòng)邊界條件的控制

14、fixtitle的實(shí)現(xiàn)

1）fixtitle的樣子

2）數(shù)據(jù)的選取芋绸，利用計(jì)算屬性計(jì)算獲得

3）邊界條件的控制以及偏移動(dòng)畫

偏移動(dòng)畫的樣子

15媒殉、獲取歌手詳情頁(yè)的數(shù)據(jù)及處理

1）采用二級(jí)路由的方式形成跳轉(zhuǎn)

⑴創(chuàng)建組件singer-datail

⑵在router的index.js文件下

⑶在singer組件中應(yīng)用router

⑷抓取listview中的數(shù)據(jù)，派發(fā)點(diǎn)擊事件

⑸在singer中接受點(diǎn)擊事件并產(chǎn)生跳轉(zhuǎn)

2）用vuex進(jìn)行數(shù)據(jù)的管理

⑴安裝vuex

⑵store的文件布局

⑶配置各個(gè)文件摔敛，此例子為配置singer的數(shù)據(jù)

index.js

mutations-type.js

mutation.js

getter.js

state.js

⑷在main.js中引用

3）song數(shù)據(jù)的整理

⑴先獲取singer的數(shù)據(jù)廷蓉，因?yàn)閟ong的數(shù)據(jù)是根據(jù)跳轉(zhuǎn)的singerID來的

vuex的語法糖

獲取歌手?jǐn)?shù)據(jù)

在singer-details組件中獲取數(shù)據(jù)

⑵整理想要的數(shù)據(jù)格式

定義一個(gè)song的類

⑶獲取數(shù)據(jù)

獲得song數(shù)據(jù)

16、組件muisc-list開發(fā)

1）頁(yè)面樣式

2)路由回退功能

template

methods

3）背景的制作

⑴背景圖片的獲取

⑵playBtn的制作

⑶還有覆蓋層的制作

4）滾動(dòng)塊的制作形成主體內(nèi)容塊

⑴引用scroll組件

⑵獲取滾動(dòng)的距離

定義數(shù)據(jù)scrollY

定義探針和滾動(dòng)監(jiān)聽事件

獲取滾動(dòng)的縱坐標(biāo)

⑶當(dāng)滾動(dòng)發(fā)生時(shí)马昙，layer背景層跟隨滾動(dòng)

效果圖

邊界條件的處理

17桃犬、song-list組件的開發(fā)

1）遍歷數(shù)據(jù)

18、內(nèi)置播放器組件

⑴播放器的樣式

展開狀態(tài)

縮小狀態(tài)

⑵給vuex添加要管理的數(shù)據(jù)

getter

mutation-types

actions

mutations

⑶歌單數(shù)據(jù)的獲取

⑷歌單數(shù)據(jù)的應(yīng)用（略）

⑸縮放按鈕的設(shè)置

⑹縮放動(dòng)畫

⑺播放暫停按鈕

根據(jù)playing來判斷audio的播放和暫停

綁定一個(gè)點(diǎn)擊事件

⑻前進(jìn)后退功能

19行楞、進(jìn)度條組件

⑴傳入rate計(jì)算播放進(jìn)度

⑵綁定3個(gè)事件

⑶進(jìn)度條點(diǎn)擊事件以及其他封裝的方法