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

創(chuàng)新互聯(lián)是一家網(wǎng)站設(shè)計(jì)公司，集創(chuàng)意、互聯(lián)網(wǎng)應(yīng)用、軟件技術(shù)為一體的創(chuàng)意網(wǎng)站建設(shè)服務(wù)商，主營產(chǎn)品：響應(yīng)式網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站設(shè)計(jì)、成都全網(wǎng)營銷。我們專注企業(yè)品牌在網(wǎng)站中的整體樹立，網(wǎng)絡(luò)互動的體驗(yàn)，以及在手機(jī)等移動端的優(yōu)質(zhì)呈現(xiàn)。網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、移動互聯(lián)產(chǎn)品、網(wǎng)絡(luò)運(yùn)營、VI設(shè)計(jì)、云產(chǎn)品.運(yùn)維為核心業(yè)務(wù)。為用戶提供一站式解決方案，我們深知市場的競爭激烈，認(rèn)真對待每位客戶，為客戶提供賞析悅目的作品，網(wǎng)站的價(jià)值服務(wù)。

快速入口的列表是其實(shí)是之前處理的歌手的數(shù)據(jù)中的關(guān)于title的列表

shorcutList屬性是計(jì)算屬性 通過ret數(shù)組中的title計(jì)算到的

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

list-vue 組件在props中接受

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

將得到的shortcutList數(shù)據(jù)通過v-for展示在頁面

效果圖如下

下面來實(shí)現(xiàn)功能

1、點(diǎn)擊右側(cè)快速入口 左側(cè)的列表跳轉(zhuǎn)到對應(yīng)位置

實(shí)現(xiàn)：給shortcutList一個(gè)touchstart方法

此時(shí) 就已實(shí)現(xiàn)點(diǎn)擊右側(cè)的快速入口 左側(cè)的歌手列表跳轉(zhuǎn)功能

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

給shortcutList一個(gè)@touchmove.stop.prevent="onShortcutTouchMove"

手指放上去的時(shí)候：

手指離開的時(shí)候：

功能三：當(dāng)左側(cè)歌手列表滑到對應(yīng)的位置 右側(cè)快速入口對應(yīng)索引處高亮顯示 此時(shí)要監(jiān)聽scroll事件 將左側(cè)列表滾動的scrollY與左側(cè)列表對應(yīng)的每個(gè)區(qū)間li的高度將比較 得到currentIndex的值 當(dāng)右側(cè)快速入口的index===currentIndex時(shí)高亮顯示

獲取各區(qū)間高度值

各區(qū)間高度對應(yīng)的值

因?yàn)槲覀冎敖oheight=0 然后前一個(gè)的上限值 等于后一個(gè)的下限值 所以我們的高度數(shù)組中的值 會比右側(cè)列表中的真實(shí)數(shù)據(jù)的個(gè)數(shù)多一個(gè)

監(jiān)控data 我們需要監(jiān)控兩個(gè)值：一個(gè)是當(dāng)scroll滾動列表中的數(shù)據(jù)變化導(dǎo)致高度變化的時(shí)候 我們對應(yīng)的高度區(qū)間也要變化

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

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

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

$emit()方法的第一個(gè)參數(shù)scroll要和父組件的@scroll項(xiàng)對應(yīng)

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

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

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

得到對應(yīng)的currentIndex

以上是“Vue 開發(fā)音樂播放器如何實(shí)現(xiàn)歌手頁右側(cè)快速入口功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！