<template>
<div>
<!-- 分页组件 -->
<ul>
<li v-for="page in totalPages" :key="page" @click="goToPage(page)">{{ page }}</li>
</ul>
<!-- 内容列表 -->
<ul ref="contentList">
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [],
currentPage: 1,
totalPages: 0
};
},
mounted() {
// 初始化数据
this.fetchData();
},
methods: {
fetchData() {
// 模拟异步获取数据
setTimeout(() => {
// 获取数据后更新items和totalPages
// ...
// 假设这里获取到了总页数
this.totalPages = 5;
}, 1000);
},
goToPage(page) {
// 更新当前页码
this.currentPage = page;
// 滚动到顶部
this.scrollToTop();
},
scrollToTop() {
// 使用原生JavaScript方法将滚动条滚动到顶部
window.scrollTo(0, 0);
}
}
};
</script>
vue如何实现点击分页后页面回顶部
最新推荐文章于 2024-07-11 17:32:07 发布