vue实现文章滚动
Vue 实现文章滚动效果
使用 CSS 实现基础滚动
通过 CSS 的 overflow 和 height 属性控制滚动区域，适用于静态内容滚动。在 Vue 模板中定义固定高度的容器，内容超出后自动滚动。
<template>
<div class="scroll-container">
<div v-for="(item, index) in articles" :key="index" class="article-item">
{{ item.content }}
</div>
</div>
</template>
<style>
.scroll-container {
height: 300px;
overflow-y: auto;
border: 1px solid #eee;
}
.article-item {
padding: 10px;
border-bottom: 1px solid #ddd;
}
</style>动态加载数据滚动
结合 v-for 和异步数据加载，实现滚动到底部时自动加载新内容。监听滚动事件，计算滚动位置触发加载逻辑。
<template>
<div class="dynamic-scroll" @scroll="handleScroll">
<div v-for="(item, index) in articles" :key="index">
{{ item.title }}
</div>
<div v-if="loading">加载中...</div>
</div>
</template>
<script>
export default {
data() {
return {
articles: [],
loading: false,
page: 1
};
},
methods: {
async loadArticles() {
this.loading = true;
const newArticles = await fetchArticles(this.page);
this.articles.push(...newArticles);
this.page++;
this.loading = false;
},
handleScroll(e) {
const { scrollTop, clientHeight, scrollHeight } = e.target;
if (scrollHeight - scrollTop === clientHeight) {
this.loadArticles();
}
}
},
mounted() {
this.loadArticles();
}
};
</script>使用第三方库优化体验
对于复杂滚动需求（如虚拟滚动），可引入 vue-virtual-scroller 等库，高效渲染大量数据。
安装库：
npm install vue-virtual-scroller示例实现：
<template>
<RecycleScroller
class="scroller"
:items="articles"
:item-size="50"
key-field="id"
>
<template v-slot="{ item }">
<div class="article">
{{ item.title }}
</div>
</template>
</RecycleScroller>
</template>
<script>
import { RecycleScroller } from 'vue-virtual-scroller';
export default {
components: { RecycleScroller },
data() {
return {
articles: [] // 长列表数据
};
}
};
</script>
<style>
.scroller {
height: 400px;
}
</style>平滑滚动动画
通过 CSS 或 JavaScript 实现平滑滚动效果，提升用户体验。使用 scroll-behavior 或自定义动画函数。
CSS 方式：
.scroll-container {
scroll-behavior: smooth;
}JavaScript 动画：
methods: {
scrollToTop() {
const container = this.$el.querySelector('.scroll-container');
const duration = 500;
const start = container.scrollTop;
const change = -start;
let startTime = null;
function animateScroll(currentTime) {
if (!startTime) startTime = currentTime;
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
container.scrollTop = start + change * progress;
if (progress < 1) requestAnimationFrame(animateScroll);
}
requestAnimationFrame(animateScroll);
}
}滚动位置恢复
在 Vue Router 的路由切换中保存和恢复滚动位置，使用 keep-alive 和滚动行为配置。
路由配置示例：
const router = new VueRouter({
routes: [...],
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
} else {
return { x: 0, y: 0 };
}
}
});组件内使用 keep-alive：
<keep-alive>
<router-view></router-view>
</keep-alive>
