1. 程式人生 > 其它 >10.小程式--詳情頁(五)播放頁

10.小程式--詳情頁(五)播放頁

1.歌詞頁面

 

 

 

 上面就可以實現歌詞手動滾動了!那麼怎麼實現唱到哪句歌詞就自動標記吶?

 

 想要實現下面的效果:

 

 不能直接給scroll-view上下一個padding,因為這樣的相當於把scroll-view的空間縮小。可以按下面的方法做:

 

 現在還有一個問題,不會隨著歌曲的播放自動滾動。

 

 

 

 

 

2.程式碼重構(難點)

為什麼要進行程式碼重構?因為比如currentSong,lyricInfos等等不僅僅在music-player頁面需要,在首頁後面也要用到,所以就不能把資料寫在這裡。

之前已經介紹了三種共享方案:①App.js;②hy-event-store;③js export。 ①③的缺點是不是響應式的,所以採用②進行共享。

邏輯:當用戶點選了歌曲列表裡面的某首歌時,跳轉到播放頁,會傳入一個id並儲存,然後根據id去獲取資料,那我們哪些資料需要共享呢?

首先:下面通過網路請求拿到的currentSong、durationTime以及lyricInfos肯定是可以拿走的。

 

 然後就在music-player中監聽狀態的改變:

 

 並在onload中呼叫這個函式:

 

 此時會發現還是沒有資料,這是因為並沒有呼叫actions裡面的方法,那麼在哪呼叫呢?

 

 其次:播放邏輯也不應該僅僅屬於music-palyer頁面

 

還是寫在前面那個actions函式裡面:

 

 

 這樣以後在主頁面切換歌曲就很方便了。

**插播一個小功能:先把返回做了!