情景描述

1.頁面 /a, 有輸入框, 當(dāng)輸入框輸入合適的值的時(shí)候, 不隱藏軟鍵盤, 點(diǎn)擊相應(yīng)按鈕直接跳到 /b
2.頁面 /b, 頁面本來內(nèi)容很少, 沒有滾動(dòng)條的, 可是莫名的被下方的灰色區(qū)域頂?shù)娇梢晠^(qū)上面, 內(nèi)容被隱藏了一點(diǎn), 但是手動(dòng)拉回正常展示以后, 問題就不再重現(xiàn)

解決辦法(針對(duì)單個(gè)頁面這個(gè)問題的)

// 在/b頁面, vue的mounted方法中, 寫設(shè)置頁面滾動(dòng)條的這個(gè)方法 mounted() {// 切換頁面時(shí)滾動(dòng)條自動(dòng)滾動(dòng)到頂部window.scrollTo(0,0); }

針對(duì)全部頁面的話, 可以在路由的鉤子函數(shù)中設(shè)置(main.js中)

// 放在`router.beforeEach`更好 router.afterEach((to,from,next) => {window.scrollTo(0,0);// 或// window.scroll(0, 0); }); router.afterEach(() => {document.body.scrollTop = 0;document.documentElement.scrollTop = 0; }) 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的vue路由切换时内容组件的滚动条回到顶部的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。