Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
stdj_h5
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Graphs
Network
Create a new issue
Commits
Issue Boards
Authored by
hookehuyr
2025-11-04 20:54:28 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
8ca53f1a99b8dc5bbf43a6287ed3b0ef55330507
8ca53f1a
1 parent
3bae5764
feat(router): 添加路由滚动行为和页面回顶功能
确保路由切换和页面激活时立即滚动到顶部,避免用户感知到过渡延迟
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
39 additions
and
2 deletions
src/router/index.js
src/views/Home.vue
src/router/index.js
View file @
8ca53f1
/*
* @Date: 2025-10-30 10:29:15
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-11-04 20:
35:3
5
* @LastEditTime: 2025-11-04 20:
52:2
5
* @FilePath: /stdj_h5/src/router/index.js
* @Description: 文件描述
*/
...
...
@@ -53,6 +53,16 @@ const routes = [
const
router
=
createRouter
({
history
:
createWebHashHistory
(
'/index.html'
),
routes
,
/**
* 路由切换时的滚动行为
* 说明:不使用平滑滚动,进入新页面时立即滚动到顶部,确保用户无感知的快速回到初始位置。
*/
scrollBehavior
(
to
,
from
,
savedPosition
)
{
if
(
savedPosition
)
{
return
savedPosition
}
return
{
left
:
0
,
top
:
0
}
}
})
// 路由守卫
...
...
src/views/Home.vue
View file @
8ca53f1
...
...
@@ -156,7 +156,7 @@
</template>
<script setup>
import { ref, computed, nextTick, onMounted, watch } from 'vue'
import { ref, computed, nextTick, onMounted,
onActivated,
watch } from 'vue'
import VideoPlayer from '@/components/VideoPlayer.vue'
import { useTitle } from '@vueuse/core';
import { useRouter } from 'vue-router'
...
...
@@ -238,6 +238,24 @@ const calculateLinePosition = async () => {
}
/**
* 确保页面滚动位置在顶部(进入或激活时立即回顶)
* 说明:使用立即滚动(非平滑)以避免过渡被用户察觉。
*/
const ensurePageScrollTop = () => {
if (typeof window !== 'undefined') {
// 立即滚动到顶部
window.scrollTo({ top: 0, behavior: 'auto' })
}
// 兜底处理,兼容部分浏览器
if (document && document.documentElement) {
document.documentElement.scrollTop = 0
}
if (document && document.body) {
document.body.scrollTop = 0
}
}
/**
* 点击切换步骤状态并更新底部箭头位置
* @param {number} index 选中步骤索引
*/
...
...
@@ -256,6 +274,8 @@ const mastersList = ref([])
// 组件挂载后计算装饰线位置
onMounted(async () => {
// 进入页面时立即回到顶部
ensurePageScrollTop()
await calculateLinePosition();
// 调用接口获取首页数据
const { code, list } = await homePageAPI();
...
...
@@ -293,10 +313,17 @@ onMounted(async () => {
updateCarouselPosition(false)
// 初始化底部箭头位置
updateArrowPosition()
// 列表内容渲染后再兜底回顶一次,避免外部干扰
ensurePageScrollTop()
})
}
})
// 组件被 keep-alive 激活时,立即回到顶部
onActivated(() => {
ensurePageScrollTop()
})
// 监听当前步骤变化,重新计算装饰线位置
watch(currentStep, () => {
calculateLinePosition()
...
...
Please
register
or
login
to post a comment