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

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

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

list-vue 組件在props中接受

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

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

效果圖如下

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

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

實現(xiàn)：給shortcutList一個touchstart方法

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

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

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

手指放上去的時候：

手指離開的時候：

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

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

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

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

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

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

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

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

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

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

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

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

得到對應(yīng)的currentIndex

總結(jié)

以上所述是小編給大家介紹的Vue 開發(fā)音樂播放器之歌手頁右側(cè)快速入口功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論