摘要：實(shí)現(xiàn)公告消息滾動(dòng)因?yàn)橐m配前端，所以在想最簡(jiǎn)實(shí)現(xiàn)一個(gè)靜態(tài)數(shù)據(jù)的抽獎(jiǎng)滾動(dòng)欄，研究時(shí)直接用了當(dāng)前運(yùn)行的框架實(shí)現(xiàn)，于是昨天先打了個(gè)草稿。經(jīng)測(cè)試在上顯示正常。

因?yàn)橐m配iOS前端，所以在想最簡(jiǎn)實(shí)現(xiàn)一個(gè)靜態(tài)數(shù)據(jù)的抽獎(jiǎng)滾動(dòng)欄，研究時(shí)直接用了當(dāng)前運(yùn)行的ReactJS框架實(shí)現(xiàn)，于是昨天先打了個(gè)草稿。經(jīng)測(cè)試在iPhone6S Plus A1699 Version 12.1.2上顯示正常。

import React from "react"
 
class ScrollMessagePage {
 
    componentDidMount() {
        //消息關(guān)鍵字?jǐn)?shù)據(jù)
        const loanUserList = ["趙", "錢(qián)", "孫", "宋", "王", "徐", "丘", "駱", "高", "夏", "蔡", "田", "樊", "胡", "陳", "霍", "潘", "萬(wàn)", "李", "洪", "莫", "王"]
        const loanMoneyList = [10, 12, 8, 5, 8, 7, 6, 23, 18, 10, 2, 1]
        const loanSexList = ["先生", "先生", "先生", "女士", "女士"]
 
        function getText() {
            const randomSex = loanSexList[parseInt(Math.random() * loanSexList.length)]
            const randomName = loanUserList[parseInt(Math.random() * loanUserList.length)]
            const randomMoney = loanMoneyList[parseInt(Math.random() * loanMoneyList.length)]
            return randomName + randomSex + "獲得" + randomMoney + "元紅包"
        }
 
        let messageList = []
        for (let i = 0; i < 3; i++) {
            messageList.push(getText())
        }
        let box = document.getElementById("scroll-message")
        box.style.height = "30px"
        box.style.overflow = "hidden"
 
        function createElement(text) {
            let Text = document.createElement("div")
            Text.style.height = "30px"
            Text.style.transition = "margin-top 1s"
            Text.innerText = text
            box.appendChild(Text)
        }
 
        messageList.map(text => {
            createElement(text)
        })
        this.timer = setInterval(() => {
            createElement(getText())
            box.childNodes[1].style.marginTop = "-30px"
            box.removeChild(box.childNodes[0])
        }, 3000)
    }
 
    componentWillUnMount() {
        clearInterval(this.timer)
    }
 
    render() {
        return (
            

                

            
        )
    }
 
 
}
 
export default ScrollMessagePage

經(jīng)過(guò)今天的測(cè)試發(fā)現(xiàn)，在第一次加載計(jì)時(shí)器的時(shí)候滾動(dòng)條會(huì)將滾動(dòng)數(shù)據(jù)第二條數(shù)據(jù)快速跳過(guò)，造成不好的用戶(hù)體驗(yàn)，另外頻繁的操作DOM也會(huì)造成性能損耗，于是使用了文檔碎片對(duì)滾動(dòng)條進(jìn)行優(yōu)化

        let box = document.getElementById("scroll-message")
        let fragement = document.createDocumentFragment("div")
        let message = document.createElement("div")
        message.style.height = "30px"
        message.style.overflow = "hidden"
        fragement.appendChild(message)

        function createElement(text, style, ele = message) {
            let Text = document.createElement("div")
            Text.style.height = "30px"
            Text.style.lineHeight = "30px"
            Text.style.transition = "margin-top 1s"
            style && Object.keys(style).map(key => Text.style[key] = style[key])
            Text.innerText = text
            ele.appendChild(Text)
        }

        let messageList = []
        for (let i = 0; i < 2; i++) {
            messageList.push(getText())
        }
        messageList.map((text, index) => createElement(text, index===0?{marginTop:"-30px"}:null))
        this.timer = setInterval(() => {
            createElement(getText())
            message.childNodes[1].style.marginTop = "-30px"
            message.removeChild(message.childNodes[0])
        }, 3000)
        box.appendChild(fragement)

【如何修復(fù)數(shù)據(jù)跳過(guò)BUG】此次更新修復(fù)了滾動(dòng)條在第一次計(jì)時(shí)器運(yùn)行時(shí)跳過(guò)第二條數(shù)據(jù)的問(wèn)題，發(fā)生問(wèn)題的原因是因?yàn)槌跏蓟鏅跀?shù)據(jù)的時(shí)候并未添加marginTop，在計(jì)時(shí)器執(zhí)行之后第二條數(shù)據(jù)原本會(huì)替換第一條數(shù)據(jù)的位置，然而因?yàn)榈谝粭l數(shù)據(jù)被刪除所以跑到第一條數(shù)據(jù)位置上面，我通過(guò)直接將第二條數(shù)據(jù)初始化到第一條數(shù)據(jù)的位置解決了該問(wèn)題。

【處理性能損耗】使用計(jì)時(shí)器頻繁對(duì)dom進(jìn)行操作，會(huì)使整個(gè)頁(yè)面頻繁進(jìn)行DOM渲染，解決性能損耗的問(wèn)題我參考 createDocumentFragment();方法實(shí)現(xiàn)，將該公告欄DOM插入到該方法創(chuàng)建的文檔碎片，將子元素插入到文檔片段時(shí)不會(huì)引起頁(yè)面回流。

小結(jié)

初次向大家分享我的想法，有更好的實(shí)現(xiàn)方法可以評(píng)論留言，關(guān)于性能損耗的問(wèn)題我認(rèn)識(shí)有些不足，請(qǐng)大家多多指教。