10.小程式--詳情頁(五)播放頁
阿新 • • 發佈:2022-04-01
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函式裡面:
這樣以後在主頁面切換歌曲就很方便了。
**插播一個小功能:先把返回做了!