admin 管理员组文章数量: 1184232
2024年3月6日发(作者：rest英语是什么意思)
vue项目中,滚动条恢复初始位置的方法
一、使用Vue-router滚动行为：
你可以使用Vue-router的滚动行为，让每个路由的滚动条恢复到初始位置。
1、在 router/中添加以下代码：
const router = new VueRouter({
mode: 'history',
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
},
routes
})
/*
mode: 'history', 将路由设置为HTML5 History 模式
scrollBehavior (to, from, savedPosition)定义滚动行为，返回需要滚动到的位置对象
{ x: 0, y: 0 }表示滚动到顶部，如果想滚动到指定的位置，你可以返回{ x: 0, y: 100 }，这是表示滚动到 100 像素高度
*/
2、引入组件，在组件中定义 mounted 事件：
mounted() {
this.$nextTick(() => {
- 1 -
To(0, 0);
});
}
/*
this.$nextTick表示当组件被挂载完成之后，才会触发函数，To用来将滚动条恢复到初始位置，设置 x 为 0，y 为
0 则表示滚动条恢复到顶部，其他位置同理。
*/
二、使用 JavaScript 的 scrollTo 方法：
使用 JavaScript 的 scrollTo 方法，可以在切换到某个页面的时候让滚动条恢复到初始位置。
1、在 router/ 中添加以下代码：
routes: [
{
path: '/',
component: Home,
beforeEnter: (to, from, next) => {
To(0, 0);
next();
}
}
]
- 2 -
/*
在 beforeEnter 中调用 To 方法将滚动条恢复到初始位置，当 beforeEnter 函数执行完毕之后才会跳转到目标路由
*/
2、在组件中定义 mounted 事件：
mounted() {
this.$nextTick(() => {
To(0, 0);
});
}
/*
this.$nextTick表示当组件被挂载完成之后，才会触发函数，To用来将滚动条恢复到初始位置，设置 x 为 0，y 为
0 则表示滚动条恢复到顶部，其他位置同理。
- 3 -
版权声明：本文标题：vue项目中,滚动条恢复初始位置的方法 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1709719451a544068.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论