JS實(shí)現(xiàn)公告消息滾動(dòng)

因?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 = ['趙', '錢', '孫', '宋', '王', '徐', '丘', '駱', '高', '夏', '蔡', '田', '樊', '胡', '陳', '霍', '潘', '萬(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 = textbox.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 (<div className="match"><div id="scroll-message"/></div>)}}export default ScrollMessagePage

經(jīng)過(guò)今天的測(cè)試發(fā)現(xiàn)，在第一次加載計(jì)時(shí)器的時(shí)候滾動(dòng)條會(huì)將滾動(dòng)數(shù)據(jù)第二條數(shù)據(jù)快速跳過(guò)，造成不好的用戶體驗(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 = textele.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)大家多多指教。

總結(jié)

以上是生活随笔為你收集整理的JS 简单实现公告消息自动逐条切换的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。