歌词滚动功能(hot)

[Sunny]

歌词滚动功能(hot)

[Z1the3]

    // vue
    // use-lyric.js

    const lyric = [
        {text:'第一句',time:1000},
        {text:'第二句',time:2000}
    ]
    
    export default function useLyric({lyric,currentTime}){
        const currentLine = ref(0)
        const lyricScrollRef = ref(null)
        const lyricListRef = ref(null)
    
        const setLine = (line) =>{
                currentLine.value = line
                scrollToLine(index)
        }
        function playLyric(){
            if(lyric){
                for(let i=0;i<lyric.length;i++){
                    if(lyric[i].time - currentTime.value>-1000
                        &&lyric[i].time - currentTime.value<0){
                            setLine(i)
                            return
                    }
                }
            }
        }
    
        function scrollToLine(index){
            const scrollComp = lyricScrollRef.value
            const listEl = lyricListRef.value
            if (!listEl) return
            if (lineNum > 5) {
                // 滚动到当前行的前五行位置
                const lineEl = listEl.children[lineNum - 5]
                scrollComp.scroll.scrollToElement(lineEl, 5000)
            } else {
                scrollComp.scroll.scrollTo(0, 0, 1000)
            }
            return lineNum
    
        }
        return {
            currentLine,
            setLine,
            playLyric,
            lyricListRef,
            lyricScrollRef
        }
    }