精彩！Vue 實(shí)現(xiàn)消息列表向上無縫滾動(dòng)！絲滑...
共 9382字，需瀏覽 19分鐘
·
2024-06-20 11:00
點(diǎn)擊上方 藍(lán)字 關(guān)注我們
大家好，我是CodeQi！
最近，我的老板又給我布置了一個(gè)有趣的任務(wù)——實(shí)現(xiàn)一個(gè)消息列表向上無縫滾動(dòng)的效果。
剛聽到這個(gè)需求時(shí)，我差點(diǎn)以為要讓我編寫一個(gè)“電梯廣告屏”！不過，作為一個(gè)樂于挑戰(zhàn)的開發(fā)者，這種需求反而激發(fā)了我的興趣。
于是，我?guī)?Vue.js，開始了這次“無縫滾動(dòng)”的冒險(xiǎn)之旅。今天，我就來分享一下我是如何一步步實(shí)現(xiàn)這個(gè)效果的。
項(xiàng)目初始化
首先，我們需要初始化一個(gè) Vue 項(xiàng)目。如果你還沒有安裝 Vue CLI，可以通過以下命令安裝：
npm install -g @vue/cli然后，創(chuàng)建一個(gè)新的 Vue 項(xiàng)目：
vue create seamless-scroll
cd seamless-scroll選擇默認(rèn)配置或者根據(jù)自己的需求進(jìn)行配置。創(chuàng)建完成后，進(jìn)入項(xiàng)目目錄并啟動(dòng)開發(fā)服務(wù)器：
npm run serve創(chuàng)建基礎(chǔ)組件
在這個(gè)項(xiàng)目中，我們將創(chuàng)建一個(gè)基礎(chǔ)組件 MessageList.vue，用于展示消息列表。
1. 創(chuàng)建組件文件
在 src/components 目錄下創(chuàng)建一個(gè) MessageList.vue 文件，并添加以下內(nèi)容：
<template>
<div class="message-list" ref="messageList">
<div class="message-item" v-for="(message, index) in messages" :key="index">
{{ message }}
</div>
</div>
</template>
<script>
export default {
props: {
messages: {
type: Array,
required: true
}
},
mounted() {
this.startScrolling();
},
beforeDestroy() {
this.stopScrolling();
},
methods: {
startScrolling() {
// 在這里添加滾動(dòng)邏輯
},
stopScrolling() {
// 在這里清除滾動(dòng)邏輯
}
}
};
</script>
<style>
.message-list {
overflow: hidden;
height: 200px; /* 根據(jù)需要調(diào)整高度 */
position: relative;
}
.message-item {
height: 50px; /* 根據(jù)需要調(diào)整每個(gè)消息項(xiàng)的高度 */
display: flex;
align-items: center;
justify-content: center;
}
</style>這個(gè)組件接收一個(gè) messages 屬性，用于傳遞消息列表，并在 mounted 生命周期鉤子中啟動(dòng)滾動(dòng)邏輯。
實(shí)現(xiàn)無縫滾動(dòng)效果
2. 滾動(dòng)邏輯
我們將在 startScrolling 方法中實(shí)現(xiàn)無縫滾動(dòng)的邏輯。首先，需要將消息列表復(fù)制一份，以實(shí)現(xiàn)無縫效果。然后，通過不斷改變 transform 屬性來實(shí)現(xiàn)滾動(dòng)效果。
<template>
<div class="message-list" ref="messageList">
<div class="message-wrapper" ref="messageWrapper">
<div class="message-item" v-for="(message, index) in extendedMessages" :key="index">
{{ message }}
</div>
</div>
</div>
</template>
<script>
export default {
props: {
messages: {
type: Array,
required: true
}
},
data() {
return {
extendedMessages: [],
scrollInterval: null
};
},
mounted() {
this.extendedMessages = [...this.messages, ...this.messages];
this.startScrolling();
},
beforeDestroy() {
this.stopScrolling();
},
methods: {
startScrolling() {
const messageList = this.$refs.messageList;
const messageWrapper = this.$refs.messageWrapper;
let scrollAmount = 0;
this.scrollInterval = setInterval(() => {
scrollAmount += 1;
messageWrapper.style.transform = `translateY(-${scrollAmount}px)`;
if (scrollAmount >= messageWrapper.clientHeight / 2) {
scrollAmount = 0;
}
}, 20); // 根據(jù)需要調(diào)整滾動(dòng)速度
},
stopScrolling() {
clearInterval(this.scrollInterval);
}
}
};
</script>
<style>
.message-list {
overflow: hidden;
height: 200px; /* 根據(jù)需要調(diào)整高度 */
position: relative;
}
.message-wrapper {
transition: transform 0.1s linear;
}
.message-item {
height: 50px; /* 根據(jù)需要調(diào)整每個(gè)消息項(xiàng)的高度 */
display: flex;
align-items: center;
justify-content: center;
}
</style>在這個(gè)實(shí)現(xiàn)中，我們通過設(shè)置 setInterval 來不斷改變 messageWrapper 的 transform 屬性，使其產(chǎn)生滾動(dòng)效果。當(dāng)滾動(dòng)到原始消息列表的一半時(shí)，重置滾動(dòng)位置，實(shí)現(xiàn)無縫滾動(dòng)。
優(yōu)化與改進(jìn)
3. 優(yōu)化滾動(dòng)效果
為了使?jié)L動(dòng)效果更加平滑，可以使用 requestAnimationFrame 替代 setInterval，這樣可以更好地控制動(dòng)畫幀率。
methods: {
startScrolling() {
const messageList = this.$refs.messageList;
const messageWrapper = this.$refs.messageWrapper;
let scrollAmount = 0;
const scroll = () => {
scrollAmount += 1;
messageWrapper.style.transform = `translateY(-${scrollAmount}px)`;
if (scrollAmount >= messageWrapper.clientHeight / 2) {
scrollAmount = 0;
}
this.scrollInterval = requestAnimationFrame(scroll);
};
this.scrollInterval = requestAnimationFrame(scroll);
},
stopScrolling() {
cancelAnimationFrame(this.scrollInterval);
}
}4. 動(dòng)態(tài)消息更新
當(dāng)消息列表動(dòng)態(tài)更新時(shí)，我們需要重新計(jì)算滾動(dòng)邏輯?？梢酝ㄟ^監(jiān)聽 messages 屬性的變化來實(shí)現(xiàn)這一點(diǎn)。
watch: {
messages: {
handler() {
this.extendedMessages = [...this.messages, ...this.messages];
this.stopScrolling();
this.startScrolling();
},
deep: true
}
}5. 添加組件到主應(yīng)用
現(xiàn)在，我們已經(jīng)完成了消息列表組件的實(shí)現(xiàn)，接下來將其添加到主應(yīng)用中。
6. 創(chuàng)建主應(yīng)用組件
在 src 目錄下創(chuàng)建一個(gè) App.vue 文件，并添加以下內(nèi)容：
<template>
<div id="app">
<MessageList :messages="messages" />
<button @click="addMessage">Add Message</button>
</div>
</template>
<script>
import MessageList from './components/MessageList.vue';
export default {
name: 'App',
components: {
MessageList
},
data() {
return {
messages: [
'Message 1',
'Message 2',
'Message 3',
'Message 4',
'Message 5'
]
};
},
methods: {
addMessage() {
this.messages.push(`Message ${this.messages.length + 1}`);
}
}
};
</script>
<style>
#app {
text-align: center;
margin-top: 50px;
}
</style>在這個(gè)主應(yīng)用中，我們引入了 MessageList 組件，并定義了一些初始消息。我們還添加了一個(gè)按鈕，用于動(dòng)態(tài)添加新消息。
7. 修改 main.js 文件
確保在 src/main.js 文件中正確引入 App.vue：
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');8. 運(yùn)行應(yīng)用
現(xiàn)在，你可以運(yùn)行應(yīng)用，查看消息列表的無縫滾動(dòng)效果：
npm run serve打開瀏覽器訪問 http://localhost:8080，你應(yīng)該會(huì)看到一個(gè)自動(dòng)向上滾動(dòng)的消息列表，以及一個(gè)用于添加新消息的按鈕。
總結(jié)
通過本文的詳細(xì)介紹，我們成功地使用 Vue.js 實(shí)現(xiàn)了一個(gè)消息列表向上無縫滾動(dòng)的效果。我們首先初始化了一個(gè) Vue 項(xiàng)目，然后創(chuàng)建了一個(gè)基礎(chǔ)組件，并實(shí)現(xiàn)了滾動(dòng)邏輯。接著，我們優(yōu)化了滾動(dòng)效果，并添加了動(dòng)態(tài)消息更新的功能。最后，我們將組件添加到主應(yīng)用中，完成了整個(gè)項(xiàng)目的搭建。
希望通過本文的介紹，大家能夠更深入地了解 Vue.js 的使用方法，并在實(shí)際項(xiàng)目中靈活應(yīng)用這些技巧，創(chuàng)造出更加豐富和有趣的用戶體驗(yàn)。
祝你編碼愉快！Happy coding!