摘要:實現公告消息滾動因為要適配前端,所以在想最簡實現一個靜態數據的抽獎滾動欄,研究時直接用了當前運行的框架實現,于是昨天先打了個草稿。經測試在上顯示正常。
JS實現公告消息滾動
因為要適配iOS前端,所以在想最簡實現一個靜態數據的抽獎滾動欄,研究時直接用了當前運行的ReactJS框架實現,于是昨天先打了個草稿。經測試在iPhone6S Plus A1699 Version 12.1.2上顯示正常。
</>復制代碼
import React from "react"
class ScrollMessagePage {
componentDidMount() {
//消息關鍵字數據
const loanUserList = ["趙", "錢", "孫", "宋", "王", "徐", "丘", "駱", "高", "夏", "蔡", "田", "樊", "胡", "陳", "霍", "潘", "萬", "李", "洪", "莫", "王"]
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
經過今天的測試發現,在第一次加載計時器的時候滾動條會將滾動數據第二條數據快速跳過,造成不好的用戶體驗,另外頻繁的操作DOM也會造成性能損耗,于是使用了文檔碎片對滾動條進行優化
</>復制代碼
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)
【如何修復數據跳過BUG】此次更新修復了滾動條在第一次計時器運行時跳過第二條數據的問題,發生問題的原因是因為初始化公告欄數據的時候并未添加marginTop,在計時器執行之后第二條數據原本會替換第一條數據的位置,然而因為第一條數據被刪除所以跑到第一條數據位置上面,我通過直接將第二條數據初始化到第一條數據的位置解決了該問題。
【處理性能損耗】使用計時器頻繁對dom進行操作,會使整個頁面頻繁進行DOM渲染,解決性能損耗的問題我參考 createDocumentFragment();方法實現,將該公告欄DOM插入到該方法創建的文檔碎片,將子元素插入到文檔片段時不會引起頁面回流。
小結
</>復制代碼
初次向大家分享我的想法,有更好的實現方法可以評論留言,關于性能損耗的問題我認識有些不足,請大家多多指教。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/101438.html
摘要:先初始化一下默認樣式單行顯示,超出隱藏固定公告欄顯示區域的高度以下為了單行顯示,超出隱藏封裝函數使用方法改變列表的值來實現滾動效果知識點回調函數函數執行完之后,要執行的函數。 需求 最近項目中需要實現公告欄滾動顯示效果如下 showImg(https://segmentfault.com/img/bVZJSE?w=400&h=53); 解決方案 1、 HTML 先建一個div層作為公告...
摘要:先初始化一下默認樣式單行顯示,超出隱藏固定公告欄顯示區域的高度以下為了單行顯示,超出隱藏封裝函數使用方法改變列表的值來實現滾動效果知識點回調函數函數執行完之后,要執行的函數。 需求 最近項目中需要實現公告欄滾動顯示效果如下 showImg(https://segmentfault.com/img/bVZJSE?w=400&h=53); 解決方案 1、 HTML 先建一個div層作為公告...
摘要:先初始化一下默認樣式單行顯示,超出隱藏固定公告欄顯示區域的高度以下為了單行顯示,超出隱藏封裝函數使用方法改變列表的值來實現滾動效果知識點回調函數函數執行完之后,要執行的函數。 需求 最近項目中需要實現公告欄滾動顯示效果如下 showImg(https://segmentfault.com/img/bVZJSE?w=400&h=53); 解決方案 1、 HTML 先建一個div層作為公告...
閱讀 1777·2021-11-11 16:55
閱讀 2579·2021-08-27 13:11
閱讀 3636·2019-08-30 15:53
閱讀 2311·2019-08-30 15:44
閱讀 1400·2019-08-30 11:20
閱讀 1048·2019-08-30 10:55
閱讀 952·2019-08-29 18:40
閱讀 3045·2019-08-29 16:13