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

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

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

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

功能三：當(dāng)左側(cè)歌手列表滑到對應(yīng)的位置 右側(cè)快速入口對應(yīng)索引處高亮顯示 此時(shí)要監(jiān)聽scroll事件 將左側(cè)列表滾動(dòng)的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ù)組中的值 會(huì)比右側(cè)列表中的真實(shí)數(shù)據(jù)的個(gè)數(shù)多一個(gè)

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

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

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

這行代碼的意思是：當(dāng)我觸發(fā)滾動(dòng)事件的時(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

總結(jié)

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

最新評論