用Vue來實現音樂播放器(十八):右側快速入口點擊高亮
問題一:當我們點擊右側快速入口的時候 被點擊的地方高亮
首先我們要知道右側快速入口是為什麽高亮??因為當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來實現音樂播放器(十八):右側快速入口點擊高亮