Vue 開發音樂播放器如何實現歌手頁右側快速入口功能

小編給大家分享一下Vue 開發音樂播放器如何實現歌手頁右側快速入口功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

快速入口的列表是其實是之前處理的歌手的數據中的關于title的列表

shorcutList屬性是計算屬性 通過ret數組中的title計算到的

所以我們要在singer.vue組件中將數據傳入到list-view組件

list-vue 組件在props中接受

shortcut快速入口列表 所用到的屬性 是計算屬性 通過將singer.vue組件中傳入到list-view組件中的數據計算得到

將得到的shortcutList數據通過v-for展示在頁面

效果圖如下

下面來實現功能

1、點擊右側快速入口 左側的列表跳轉到對應位置

實現：給shortcutList一個touchstart方法

此時 就已實現點擊右側的快速入口 左側的歌手列表跳轉功能

功能2、滑動右側的快速入口 左側的歌手列表對應滑動 我們只需要獲取到手指放在右側快速列表之前的位置 和獲取到手指離開右側快速列表的位置 做差 然后處理快速列表的li的高度 就可以知道變化的索引的值 然后讓左側的歌手列表運動到變化的索引處即可

給shortcutList一個@touchmove.stop.prevent="onShortcutTouchMove"

手指放上去的時候：

手指離開的時候：

功能三：當左側歌手列表滑到對應的位置 右側快速入口對應索引處高亮顯示 此時要監聽scroll事件 將左側列表滾動的scrollY與左側列表對應的每個區間li的高度將比較 得到currentIndex的值 當右側快速入口的index===currentIndex時高亮顯示

獲取各區間高度值

各區間高度對應的值

因為我們之前給height=0 然后前一個的上限值 等于后一個的下限值 所以我們的高度數組中的值 會比右側列表中的真實數據的個數多一個

監控data 我們需要監控兩個值：一個是當scroll滾動列表中的數據變化導致高度變化的時候 我們對應的高度區間也要變化

上圖中的scroll屬性是兒子組件scroll的 scroll方法是父親組件listview的

兒子組件：this.scroll.on('scroll',()=>{me.$emit('scroll',pos)})

這行代碼的意思是：當我觸發滾動事件的時候就向上派發一個名為scroll的方法 還帶有參數pos 父組件接受到派發的這個方法之后 就觸發自己綁定的方法 本項目中父組件自己綁定的方法叫scroll

$emit()方法的第一個參數scroll要和父組件的@scroll項對應

f父元素觸發自己綁定的scroll方法之后 將pos.y的值賦值給了this.scrollY

j接下來我們監控listview中的data的變化 以及scrollY的變化 每次data變了就要重新計算calculateHeight

監控到scrollY的變化然后將_calculateHeight()方法中得到的各區間的數組的高度與scrollY相比較

得到對應的currentIndex

以上是“Vue 開發音樂播放器如何實現歌手頁右側快速入口功能”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！