1. 程式人生 > >用Vue來實現音樂播放器(十八):右側快速入口點擊高亮

用Vue來實現音樂播放器(十八):右側快速入口點擊高亮

為我 UC 沒有 short cut this 必須 左右 png

問題一:當我們點擊右側快速入口的時候 被點擊的地方高亮

首先我們要知道右側快速入口是為什麽高亮??因為當watch()監控到scrollY的變化了的時候 將scrollY的值和listHeight相比較 判斷scrollY在哪個group區間 從而判斷高亮的currentIndex 所以要想高亮 就要讓scrollY變化 但點擊右側快速入口的時候 我們沒有有scroll方法 直接走的scrollTo方法 所以無法派發scroll事件 觸發scrollY的變化 所以我們要手動的讓scrollY變化

技術分享圖片

技術分享圖片

問題二:右側快速入口滑動到頂部時候 也會跳到最後一個z上去

當我們按住鼠標一直往上滾動的時候 此時的index可能為負數 而且會一直變小

技術分享圖片

當我們按住鼠標一直往下滾動的時候 滑動到底部的index可能會變為無窮大

技術分享圖片

因為我一直在執行onShortcutTouchMove事件 此時pageY一直在增加 所以索引一直增加

所以我們要處理idnex的邊界情況

當index<0時 我們的index=0

當index>this.listHeight.length-2 那麽我們的index=this.listHeight.length-2

思路:總結左右聯動的思路:如果我們想達到左右聯動的效果,那麽首先我們必須要知道它的實時的滾動位置scrollY 根據滾動位置 來計算當前的滾動位置落在了左側的哪一個group的區間 當我們算到group區間以後 我們就知道右側對應的是哪一個索引 以及哪個區間索引應該高亮

結合到vue中我們是用到了watch去觀測這個變化 配合scroll(pos)方法 實時派發出scrollY=pos.y scrollY的值 我們去觀測scrollY的變化

觀測scrollY值的變化我們就可以計算到currentIndex 根據currentIndex 在根據Dom的一個映射 :class="{‘active‘:currentIndex===index}"

用Vue來實現音樂播放器(十八):右側快速入口點擊高亮