1. 項(xiàng)目概述為什么需要頂部橫向滾動通知在任何一個現(xiàn)代Web應(yīng)用中實(shí)時、非侵入式的信息通知都是提升用戶體驗(yàn)的關(guān)鍵一環(huán)。想象一下你正在瀏覽一個電商網(wǎng)站突然屏幕頂部出現(xiàn)一條橫幅告訴你“系統(tǒng)將于今晚12點(diǎn)進(jìn)行維護(hù)請?zhí)崆氨４鏀?shù)據(jù)”或者是一個新聞應(yīng)用滾動播放著最新的頭條快訊。這種通知方式就是我們常說的“頂部消息通知欄”。而“橫向滾動”則是這種通知欄的一種高級表現(xiàn)形式。相比于靜態(tài)的、固定高度的橫幅橫向滾動通知能在有限的頂部空間內(nèi)承載更長的、動態(tài)變化的信息。它特別適合展示諸如連續(xù)的公告列表、實(shí)時滾動的股票信息、活動倒計(jì)時、或需要用戶稍作停留閱讀的短消息流。其核心價值在于信息實(shí)時、展示高效、且不打斷用戶當(dāng)前的核心操作。用戶無需點(diǎn)擊彈窗或跳轉(zhuǎn)頁面就能用余光獲取重要信息這是對用戶體驗(yàn)的極大尊重。從技術(shù)實(shí)現(xiàn)角度看這個需求看似簡單——不就是讓一段文字從右向左移動嗎但深入下去你會發(fā)現(xiàn)它涉及Vue.js響應(yīng)式數(shù)據(jù)驅(qū)動、CSS動畫性能、組件生命周期管理、以及如何優(yōu)雅地處理動態(tài)內(nèi)容更新等一系列前端核心知識點(diǎn)。無論是剛接觸Vue的新手還是希望優(yōu)化現(xiàn)有通知組件的中高級開發(fā)者親手實(shí)現(xiàn)一個健壯、可復(fù)用的頂部橫向滾動通知組件都是一次絕佳的練手機(jī)會。它能幫你鞏固Vue的基礎(chǔ)如v-for、計(jì)算屬性、監(jiān)聽器并深入到動畫與渲染性能的實(shí)踐層面。2. 核心思路與方案選型在動手寫代碼之前我們先來拆解一下“頂部橫向滾動通知”這個功能。它本質(zhì)上是一個UI組件其行為可以描述為一個固定在視口頂部的容器內(nèi)部有一段或多段文本內(nèi)容這些內(nèi)容以恒定的速度從容器右側(cè)向左側(cè)平移形成無縫或循環(huán)的滾動效果?；谶@個描述我們可以梳理出幾個核心的技術(shù)決策點(diǎn)2.1 滾動動畫的實(shí)現(xiàn)方式這是最核心的技術(shù)選型主流有三種方案純CSSanimationkeyframes原理通過CSS定義從transform: translateX(100%)到transform: translateX(-100%)的關(guān)鍵幀動畫并將其應(yīng)用到文本元素上。優(yōu)點(diǎn)實(shí)現(xiàn)簡單代碼簡潔性能通常較好瀏覽器可硬件加速。缺點(diǎn)動畫時長和內(nèi)容是固定的。如果文本內(nèi)容動態(tài)變長需要重新計(jì)算keyframes中的百分比或動畫時長不夠靈活。實(shí)現(xiàn)“無縫循環(huán)”需要一些技巧如復(fù)制一份內(nèi)容。JavaScript 定時器 CSStransform原理使用setInterval或requestAnimationFrame在每一幀中通過JavaScript計(jì)算并更新文本元素的transform: translateX()值。優(yōu)點(diǎn)控制粒度極細(xì)可以隨時暫停、恢復(fù)、動態(tài)調(diào)整速度也能輕松應(yīng)對內(nèi)容動態(tài)變化。無縫循環(huán)的邏輯也更容易實(shí)現(xiàn)。缺點(diǎn)需要自己管理動畫循環(huán)代碼量稍多如果實(shí)現(xiàn)不當(dāng)可能引發(fā)性能問題。使用第三方動畫庫如anime.js,GSAP原理利用庫提供的強(qiáng)大API來驅(qū)動動畫。優(yōu)點(diǎn)功能強(qiáng)大特效豐富通常有很好的性能和兼容性處理。缺點(diǎn)為相對簡單的需求引入額外的依賴可能增加包體積。我們的選擇對于這個以學(xué)習(xí)和理解原理為主的項(xiàng)目我強(qiáng)烈推薦方案二JavaScript定時器 CSStransform。原因有三第一它能讓我們最直觀地理解動畫驅(qū)動的過程第二它提供了最大的靈活性方便我們后續(xù)擴(kuò)展功能如動態(tài)內(nèi)容、暫停/繼續(xù)第三在Vue的響應(yīng)式系統(tǒng)配合下實(shí)現(xiàn)起來并不復(fù)雜。requestAnimationFrame能確保動畫與瀏覽器刷新率同步性能有保障。2.2 Vue組件的設(shè)計(jì)模型我們將構(gòu)建一個名為TopScrollNotice的Vue單文件組件SFC。它的設(shè)計(jì)應(yīng)該遵循“高內(nèi)聚、低耦合”的原則Props外部輸入接收消息列表messages: Array、滾動速度speed: Number、是否暫停paused: Boolean等配置。Data內(nèi)部狀態(tài)管理當(dāng)前的滾動位移offset、動畫幀IDanimationId等。Methods行為包含啟動動畫startAnimation、停止動畫stopAnimation、計(jì)算位移等方法。生命周期鉤子在mounted中啟動動畫在beforeUnmount中清理資源防止內(nèi)存泄漏。模板與樣式使用一個固定定位position: fixed的容器內(nèi)部包裹一個用于實(shí)際移動的內(nèi)容元素。2.3 無縫滾動的關(guān)鍵技巧如果只有一條消息讓它從右滾到左消失然后重新從右側(cè)出現(xiàn)會有一個明顯的“跳變”間隙體驗(yàn)很差。無縫滾動的目標(biāo)是讓多條消息或一條長消息的首尾銜接形成無限循環(huán)的錯覺。核心技巧是“內(nèi)容復(fù)制”我們將用于滾動的消息列表在邏輯上復(fù)制一份例如將[消息A, 消息B]變成[消息A, 消息B, 消息A, 消息B]。當(dāng)滾動完原始內(nèi)容即第一份副本時位移恰好回到起點(diǎn)因?yàn)橐曈X上第二份副本緊接著出現(xiàn)了用戶感知不到重置。此時我們可以將位移悄無聲息地重置為0從而開始新一輪的循環(huán)。這個“重置點(diǎn)”的判斷是實(shí)現(xiàn)的難點(diǎn)之一。3. 手把手實(shí)現(xiàn)從零構(gòu)建組件接下來我們進(jìn)入實(shí)戰(zhàn)環(huán)節(jié)。我會創(chuàng)建一個完整的Vue 3單文件組件并詳細(xì)解釋每一行代碼的意圖。3.1 組件結(jié)構(gòu)與基礎(chǔ)樣式首先我們搭建組件的骨架和靜態(tài)樣式。!-- TopScrollNotice.vue -- template div classtop-scroll-notice :stylecontainerStyle !-- 外層容器用于定位和遮罩 -- div classnotice-container !-- 實(shí)際滾動的元素通過transform進(jìn)行位移 -- div refcontentRef classscroll-content :stylecontentStyle !-- 渲染消息列表為了實(shí)現(xiàn)無縫滾動我們渲染兩份 -- span v-for(msg, index) in displayMessages :keyindex classmessage-item {{ msg }} /span /div /div /div /template script setup import { ref, computed, onMounted, onBeforeUnmount, watch } from vue; // 1. 定義組件接收的屬性 const props defineProps({ // 消息數(shù)組每條消息是一個字符串 messages: { type: Array, required: true, default: () [] }, // 滾動速度單位像素/秒。正值表示從左到右負(fù)值表示從右到左。 speed: { type: Number, default: -50 // 默認(rèn)-50px/秒即從右向左滾動 }, // 是否暫停滾動 paused: { type: Boolean, default: false }, // 容器高度 height: { type: String, default: 40px }, // 背景顏色 backgroundColor: { type: String, default: #fffbe6 // 淡黃色背景常見于通知 }, // 文字顏色 color: { type: String, default: #d48806 }, // 字體大小 fontSize: { type: String, default: 14px } }); // 2. 定義響應(yīng)式數(shù)據(jù)和引用 const contentRef ref(null); // 指向滾動內(nèi)容DOM元素的引用 const offset ref(0); // 當(dāng)前的滾動位移像素 const animationFrameId ref(null); // requestAnimationFrame返回的ID用于取消動畫 const containerWidth ref(0); // 容器可視區(qū)域的寬度 const contentWidth ref(0); // 滾動內(nèi)容的總寬度 // 3. 計(jì)算屬性 // 為了無縫滾動需要顯示兩份消息列表 const displayMessages computed(() { return [...props.messages, ...props.messages]; }); // 容器樣式 const containerStyle computed(() ({ height: props.height, backgroundColor: props.backgroundColor, color: props.color, fontSize: props.fontSize, lineHeight: props.height // 讓文字垂直居中 })); // 滾動內(nèi)容的樣式核心是動態(tài)的transform const contentStyle computed(() ({ transform: translateX(${offset.value}px), whiteSpace: nowrap // 防止文字換行確保橫向排列 })); /script style scoped .top-scroll-notice { position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; /* 確保在最頂層 */ overflow: hidden; /* 隱藏超出容器的部分 */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加一點(diǎn)陰影增強(qiáng)層次感 */ } .notice-container { width: 100%; height: 100%; position: relative; overflow: hidden; /* 這個overflow:hidden是關(guān)鍵它創(chuàng)造了“視窗”效果 */ } .scroll-content { position: absolute; left: 0; top: 0; height: 100%; /* transform: translateX() 將通過計(jì)算屬性動態(tài)設(shè)置 */ display: inline-flex; /* 使用flex讓span水平排列并垂直居中 */ align-items: center; } .message-item { padding: 0 40px; /* 給每條消息左右添加內(nèi)邊距避免首尾相接太緊 */ display: inline-block; /* 確保每個消息項(xiàng)是行內(nèi)塊可以并排 */ } /style代碼解析與注意事項(xiàng)position: fixed這是讓通知欄固定在頂部的關(guān)鍵。top: 0; left: 0; width: 100%確保了它覆蓋整個視口寬度。雙層overflow: hidden外層容器.top-scroll-notice的overflow: hidden是備用的。內(nèi)層容器.notice-container的overflow: hidden才是真正的“裁剪區(qū)域”它決定了用戶能看到的內(nèi)容范圍。.scroll-content在這個區(qū)域外移動超出部分被隱藏從而形成滾動效果。display: inline-flex在.scroll-content上使用這個屬性配合align-items: center可以非常方便地讓內(nèi)部的消息項(xiàng)垂直居中比設(shè)置line-height更靈活。whiteSpace: nowrap這是計(jì)算屬性contentStyle中的關(guān)鍵它強(qiáng)制所有span.message-item在同一行顯示不會因?yàn)槿萜鲗挾炔蛔愣鴵Q行。message-item的padding給每條消息添加左右內(nèi)邊距是為了在視覺上分隔多條消息也讓滾動看起來不那么急促。這個值可以根據(jù)實(shí)際UI設(shè)計(jì)調(diào)整。3.2 動畫引擎的核心邏輯現(xiàn)在我們來添加讓內(nèi)容動起來的“心臟”——基于requestAnimationFrame的動畫循環(huán)。在script setup部分我們繼續(xù)添加以下代碼// 4. 核心方法動畫循環(huán) const animate () { if (props.paused) { // 如果暫停則停止當(dāng)前動畫幀并直接返回 if (animationFrameId.value) { cancelAnimationFrame(animationFrameId.value); animationFrameId.value null; } return; } // 計(jì)算上一幀到這一幀的時間增量deltaTime以實(shí)現(xiàn)與時間相關(guān)的勻速運(yùn)動 // 這里我們簡化處理假設(shè)每幀時間固定約16.7ms 60fps使用一個固定的時間步長。 // 更精確的做法是記錄上一次動畫執(zhí)行的時間戳計(jì)算真實(shí)差值。 const deltaTime 16.67; // 毫秒對應(yīng)60幀/秒 const deltaPixels (props.speed * deltaTime) / 1000; // 速度(px/ms) * 時間(ms) // 更新位移 offset.value deltaPixels; // !!! 關(guān)鍵邏輯判斷是否需要進(jìn)行“無縫跳轉(zhuǎn)” // 我們渲染了兩份 messages (displayMessages)。 // 當(dāng)?shù)谝环?messages 完全滾出視口時offset的絕對值應(yīng)該 contentWidth的一半。 // 此時我們將offset重置回0因?yàn)榈诙輒essages已經(jīng)接上視覺上是連續(xù)的。 // 注意speed為負(fù)時offset是遞減的。 const halfContentWidth contentWidth.value / 2; if (props.speed 0 offset.value -halfContentWidth) { // 從右向左滾動當(dāng)向左移動的距離超過一半內(nèi)容寬度時跳回起點(diǎn) offset.value 0; } else if (props.speed 0 offset.value halfContentWidth) { // 從左向右滾動當(dāng)向右移動的距離超過一半內(nèi)容寬度時跳回起點(diǎn) offset.value 0; } // 請求下一幀動畫 animationFrameId.value requestAnimationFrame(animate); }; // 5. 啟動和停止動畫的方法 const startAnimation () { if (animationFrameId.value) { cancelAnimationFrame(animationFrameId.value); // 防止重復(fù)啟動 } animationFrameId.value requestAnimationFrame(animate); }; const stopAnimation () { if (animationFrameId.value) { cancelAnimationFrame(animationFrameId.value); animationFrameId.value null; } }; // 6. 初始化獲取容器和內(nèi)容的寬度 const initWidths () { if (contentRef.value contentRef.value.parentElement) { containerWidth.value contentRef.value.parentElement.clientWidth; // contentRef.value 包含了雙份消息其寬度是單份消息寬度的兩倍 contentWidth.value contentRef.value.scrollWidth; // 初始化位移如果是從右向左滾動初始位置應(yīng)該在容器右側(cè) if (props.speed 0) { offset.value containerWidth.value; } else { offset.value -contentWidth.value / 2; // 從左向右滾動初始在左側(cè)外 } } }; // 7. 監(jiān)聽屬性變化 watch(() props.paused, (newVal) { if (newVal) { stopAnimation(); } else { startAnimation(); } }); watch(() props.messages, () { // 當(dāng)消息內(nèi)容變化時需要重新初始化寬度和位移 // 使用 nextTick 確保DOM已更新 setTimeout(() { initWidths(); }, 0); }, { deep: true }); // 深度監(jiān)聽因?yàn)閙essages是數(shù)組 // 8. 生命周期鉤子 onMounted(() { // 組件掛載后初始化寬度并啟動動畫 initWidths(); startAnimation(); // 監(jiān)聽窗口大小變化重新計(jì)算寬度可選但更健壯 window.addEventListener(resize, initWidths); }); onBeforeUnmount(() { // 組件銷毀前必須停止動畫并移除事件監(jiān)聽器防止內(nèi)存泄漏 stopAnimation(); window.removeEventListener(resize, initWidths); });核心邏輯深度解析animate函數(shù)這是動畫的驅(qū)動引擎。它利用requestAnimationFrame這個瀏覽器API來遞歸調(diào)用自身從而實(shí)現(xiàn)平滑的動畫循環(huán)。在每一幀中它根據(jù)speed和假設(shè)的幀時間deltaTime計(jì)算出這一幀應(yīng)該移動的像素deltaPixels然后更新offset。offset的變化會觸發(fā)contentStyle計(jì)算屬性的更新進(jìn)而驅(qū)動DOM的transform樣式變化視覺上內(nèi)容就移動了。無縫滾動重置邏輯這是整個組件最精妙的部分。我們通過displayMessages計(jì)算屬性渲染了雙份內(nèi)容。假設(shè)單份內(nèi)容寬度為W那么總寬度contentWidth就是2W。當(dāng)speed 0從右向左滾時offset從初始的containerWidth容器寬度開始遞減。當(dāng)offset減少到-W時意味著第一份內(nèi)容已經(jīng)完全滾出了視口左側(cè)。此時第二份內(nèi)容正好占據(jù)了整個視口。如果我們瞬間將offset重置為0由于第二份內(nèi)容和第一份內(nèi)容一模一樣用戶視覺上完全感知不到這個“跳變”內(nèi)容看起來就在無限循環(huán)向左滾動。代碼中的判斷條件是offset.value -halfContentWidth其中halfContentWidth就是W。對于從左向右滾邏輯是鏡像的。initWidths函數(shù)動畫依賴準(zhǔn)確的寬度信息。這個函數(shù)在組件掛載、消息變化、窗口縮放時被調(diào)用用于獲取容器可視寬度和滾動內(nèi)容的總寬度并設(shè)置初始位移。初始位移的設(shè)置至關(guān)重要它決定了動畫從哪個位置開始。對于從右向左滾我們通常讓內(nèi)容從容器右側(cè)外部開始進(jìn)入offset.value containerWidth.value。資源管理在onBeforeUnmount中清理animationFrameId和移除resize事件監(jiān)聽器是防止內(nèi)存泄漏和潛在錯誤的關(guān)鍵步驟務(wù)必不要遺漏。3.3 在父組件中使用組件已經(jīng)完成現(xiàn)在讓我們看看如何在應(yīng)用中使用它。!-- App.vue 或任意父組件 -- template div idapp !-- 使用我們的滾動通知組件 -- TopScrollNotice :messagesnoticeMessages :speed-60 :pausedisPaused height36px backgroundColor#f0f7ff color#1890ff / !-- 頁面其他內(nèi)容 -- main h1我的應(yīng)用主頁/h1 button clicktogglePause{{ isPaused ? 繼續(xù)滾動 : 暫停滾動 }}/button button clickaddMessage添加一條新消息/button p頁面主體內(nèi)容.../p /main /div /template script setup import { ref } from vue; import TopScrollNotice from ./components/TopScrollNotice.vue; const noticeMessages ref([ 歡迎來到本站祝您瀏覽愉快, ?? 系統(tǒng)將于 2023年10月1日 凌晨2:00-4:00 進(jìn)行例行維護(hù)。, 熱門活動金秋大促全場商品滿299減50, 公告用戶協(xié)議已于近期更新請您知悉。 ]); const isPaused ref(false); const togglePause () { isPaused.value !isPaused.value; }; const addMessage () { const newMsg 新消息 ${new Date().toLocaleTimeString()}; noticeMessages.value.push(newMsg); // 由于我們監(jiān)聽了messages的變化組件會自動重新初始化寬度 }; /script style /* 為頁面主體內(nèi)容添加頂部內(nèi)邊距防止被固定定位的通知欄遮擋 */ main { padding-top: 50px; /* 略大于通知欄高度 */ } body, html { margin: 0; padding: 0; } /style4. 性能優(yōu)化與高級功能拓展一個基礎(chǔ)的滾動組件已經(jīng)完成但要投入生產(chǎn)環(huán)境我們還需要考慮更多。4.1 性能優(yōu)化要點(diǎn)使用requestAnimationFrame我們已經(jīng)使用了它這是實(shí)現(xiàn)流暢動畫的最佳實(shí)踐。它確保動畫回調(diào)在瀏覽器下一次重繪之前執(zhí)行與刷新率同步避免丟幀。GPU加速我們通過transform: translateX()來移動元素這個屬性通常會被瀏覽器使用GPU進(jìn)行加速渲染性能遠(yuǎn)優(yōu)于修改left或margin-left等屬性。避免頻繁的重排Reflow與重繪Repaint我們的動畫只修改了transform和opacity這類不影響布局和樣式的屬性瀏覽器只需要進(jìn)行代價較低的重繪或直接使用合成層不會觸發(fā)整個頁面或子樹的重排性能極佳。防抖處理resize監(jiān)聽在initWidths函數(shù)被resize事件頻繁調(diào)用時可以添加防抖debounce邏輯避免在窗口縮放過程中過于頻繁地計(jì)算寬度和重置位移。import { debounce } from lodash-es; // 或自己實(shí)現(xiàn)一個簡單防抖函數(shù) const debouncedInitWidths debounce(initWidths, 150); window.addEventListener(resize, debouncedInitWidths); // 記得在onBeforeUnmount中移除 debouncedInitWidths4.2 常見問題與排查技巧在實(shí)際開發(fā)和使用中你可能會遇到以下問題問題現(xiàn)象可能原因解決方案內(nèi)容不滾動1.paused屬性被設(shè)置為true。2.speed設(shè)置為0。3.requestAnimationFrame未成功啟動如onMounted未執(zhí)行。4. CSS的overflow: hidden未正確設(shè)置。1. 檢查父組件傳入的paused值。2. 檢查speed值確保非零。3. 在onMounted中添加console.log調(diào)試。4. 使用瀏覽器開發(fā)者工具檢查.notice-container的樣式。滾動卡頓、不流暢1. 頁面存在其他高性能消耗的腳本或動畫搶占主線程。2. 消息內(nèi)容過長或過多導(dǎo)致contentWidth計(jì)算巨大。3. 未使用transform而是使用了left等屬性。1. 優(yōu)化其他腳本或降低本組件動畫頻率非推薦。2. 考慮限制消息長度或條數(shù)。3. 確保動畫是通過transform實(shí)現(xiàn)。無縫滾動處有“閃爍”或跳動1. 重置位移offset.value 0的時機(jī)不精確。2. 內(nèi)容寬度計(jì)算有誤halfContentWidth不準(zhǔn)確。3. 消息項(xiàng)之間的padding或margin影響寬度計(jì)算。1. 在animate函數(shù)中使用getBoundingClientRect()更精確地判斷元素位置。2. 在initWidths后打印containerWidth和contentWidth進(jìn)行調(diào)試。3. 確保contentRef.value.scrollWidth包含了所有內(nèi)邊距和邊框。消息更新后滾動位置錯亂1. 更新messages后contentWidth未及時重新計(jì)算。2.watch監(jiān)聽messages后DOM更新和寬度計(jì)算存在時序問題。1. 確認(rèn)watch中調(diào)用了initWidths并使用了{(lán) deep: true }。2. 將initWidths調(diào)用包裹在nextTick()或setTimeout(fn, 0)中確保在DOM更新后執(zhí)行。組件銷毀后控制臺有警告或動畫仍在運(yùn)行未在onBeforeUnmount中正確清理資源animationFrameId和事件監(jiān)聽器。務(wù)必在onBeforeUnmount中調(diào)用stopAnimation()并移除所有事件監(jiān)聽器。4.3 功能拓展思路一個基礎(chǔ)的組件可以隨著需求演變而變得更強(qiáng)大支持點(diǎn)擊事件為每條消息或整個通知欄添加點(diǎn)擊事件?？梢栽趍essage-item上綁定click并發(fā)射一個自定義事件將點(diǎn)擊的消息索引和內(nèi)容傳遞給父組件。豐富動畫效果除了勻速滾動可以支持緩動函數(shù)easing functions讓滾動開始和結(jié)束時有加速/減速效果。這需要在animate函數(shù)中根據(jù)時間進(jìn)度計(jì)算位移而不是簡單的線性累加。垂直滾動支持修改CSS和動畫邏輯將translateX改為translateY即可實(shí)現(xiàn)從頂部或底部出現(xiàn)的垂直滾動通知。多行/富文本支持當(dāng)前組件假設(shè)每條消息是純文本單行。可以修改模板允許messages傳入包含HTML片段或Vue組件的對象并在message-item中使用v-html或動態(tài)組件來渲染以支持圖標(biāo)、鏈接等富文本內(nèi)容。自動高度移除固定的height屬性讓容器高度根據(jù)字體大小和行數(shù)自適應(yīng)。關(guān)閉按鈕在容器右側(cè)添加一個關(guān)閉圖標(biāo)點(diǎn)擊后通過v-if或v-show隱藏整個通知組件并可能將關(guān)閉狀態(tài)持久化到本地存儲localStorage。5. 在Vue 2與Vue 3中的差異處理上面的示例代碼使用的是Vue 3的script setup語法。如果你還在使用Vue 2核心邏輯完全一致只是語法需要調(diào)整組件定義使用export default { ... }選項(xiàng)式API。響應(yīng)式數(shù)據(jù)在data()函數(shù)中返回offset,animationFrameId等。計(jì)算屬性在computed: { ... }選項(xiàng)中定義。方法在methods: { ... }選項(xiàng)中定義animate,startAnimation等方法。生命周期使用mounted()和beforeDestroy()鉤子。屬性監(jiān)聽使用watch: { ... }選項(xiàng)來監(jiān)聽paused和messages。模板引用使用refcontentRef并在方法中通過this.$refs.contentRef訪問。最重要的一個實(shí)踐建議無論用Vue 2還是Vue 3在操作DOM如獲取clientWidth,scrollWidth時一定要確保DOM已經(jīng)渲染完成。Vue 2中在mounted鉤子或this.$nextTick回調(diào)中執(zhí)行Vue 3中在onMounted或nextTick中執(zhí)行。這是我們上面代碼中使用setTimeout(() initWidths(), 0)的原因它是一種簡單的、確保在下一個事件循環(huán)此時DOM已更新中執(zhí)行代碼的技巧與nextTick作用類似。實(shí)現(xiàn)一個頂部橫向滾動通知組件就像搭積木一樣將Vue的響應(yīng)式系統(tǒng)、CSS的視覺格式化模型和JavaScript的動畫循環(huán)有機(jī)地結(jié)合在一起。從確定方案到實(shí)現(xiàn)核心動畫再到處理邊界情況和性能優(yōu)化每一步都需要對前端基礎(chǔ)知識有扎實(shí)的理解。這個組件雖然不大但它像一面鏡子能清晰地反映出你對Vue組件化、數(shù)據(jù)驅(qū)動視圖、CSS渲染機(jī)制以及瀏覽器動畫原理的掌握程度。我建議你在實(shí)現(xiàn)基礎(chǔ)功能后親自嘗試一下拓展功能部分比如添加點(diǎn)擊事件或?qū)崿F(xiàn)緩動動畫這會讓你的理解從“會用”深入到“懂原理”。在實(shí)際項(xiàng)目中這樣一個經(jīng)過精心打磨的組件其穩(wěn)定性和可擴(kuò)展性遠(yuǎn)比從網(wǎng)上隨意復(fù)制一段代碼要可靠得多。