国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

vue中使用vue-router切換頁面時滾動條自動滾動到頂部的方法

來源:懂視網 責編:小采 時間:2020-11-27 22:24:41
文檔

vue中使用vue-router切換頁面時滾動條自動滾動到頂部的方法

vue中使用vue-router切換頁面時滾動條自動滾動到頂部的方法:有時候我們需要頁面滾動條滾動到某一固定的位置,一般使用Window scrollTo() 方法。 語法就是:scrollTo(xpos,ypos) xpos:必需。要在窗口文檔顯示區左上角顯示的文檔的 x 坐標。 ypos:必需。要在窗口文檔顯示區左上角顯示的文檔的 y 坐標。 例如滾動內
推薦度:
導讀vue中使用vue-router切換頁面時滾動條自動滾動到頂部的方法:有時候我們需要頁面滾動條滾動到某一固定的位置,一般使用Window scrollTo() 方法。 語法就是:scrollTo(xpos,ypos) xpos:必需。要在窗口文檔顯示區左上角顯示的文檔的 x 坐標。 ypos:必需。要在窗口文檔顯示區左上角顯示的文檔的 y 坐標。 例如滾動內

有時候我們需要頁面滾動條滾動到某一固定的位置,一般使用Window scrollTo() 方法。

語法就是:scrollTo(xpos,ypos)

xpos:必需。要在窗口文檔顯示區左上角顯示的文檔的 x 坐標。

ypos:必需。要在窗口文檔顯示區左上角顯示的文檔的 y 坐標。

例如滾動內容的坐標位置100,500:

window.scrollTo(100,500);

好了,這個scrollTop這兒只是簡單介紹一下,下面我們介紹下veu-router中的滾動行為。

使用前端路由,當切換到新路由時,想要頁面滾到頂部,或者是保持原先的滾動位置,就像重新加載頁面那樣。 vue-router 能做到,而且更好,它讓你可以自定義路由切換時頁面如何滾動。

注意: 這個功能只在 HTML5 history 模式下可用。

當創建一個 Router 實例,你可以提供一個 scrollBehavior 方法:

const router = new VueRouter({
 routes: [...],
 scrollBehavior (to, from, savedPosition) {
 // return 期望滾動到哪個的位置
 }
})

scrollBehavior 方法接收 to 和 from 路由對象。第三個參數 savedPosition 當且僅當 popstate 導航 (通過瀏覽器的 前進/后退 按鈕觸發) 時才可用。

這個方法返回滾動位置的對象信息,長這樣:

{ x: number, y: number }
{ selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)

如果返回一個 falsy (譯者注:falsy 不是 false,參考這里)的值,或者是一個空對象,那么不會發生滾動。

舉例:

scrollBehavior (to, from, savedPosition) {
 return { x: 0, y: 0 }
}

對于所有路由導航,簡單地讓頁面滾動到頂部。

返回 savedPosition,在按下 后退/前進 按鈕時,就會像瀏覽器的原生表現那樣:

scrollBehavior (to, from, savedPosition) {
 if (savedPosition) {
 return savedPosition
 } else {
 return { x: 0, y: 0 }
 }
}

如果你要模擬『滾動到錨點』的行為:

scrollBehavior (to, from, savedPosition) {
 if (to.hash) {
 return {
 selector: to.hash
 }
 }
}

我們還可以利用路由元信息更細顆粒度地控制滾動。

 routes: [
 { path: '/', component: Home, meta: { scrollToTop: true }},
 { path: '/foo', component: Foo },
 { path: '/bar', component: Bar, meta: { scrollToTop: true }}
 ]

完整的例子:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const Home = { template: '<div>home</div>' }
const Foo = { template: '<div>foo</div>' }
const Bar = {
 template: `
 <div>
 bar
 <div style="height:500px"></div>
 <p id="anchor">Anchor</p>
 </div>
 `
}
// scrollBehavior:
// - only available in html5 history mode
// - defaults to no scroll behavior
// - return false to prevent scroll
const scrollBehavior = (to, from, savedPosition) => {
 if (savedPosition) {
 // savedPosition is only available for popstate navigations.
 return savedPosition
 } else {
 const position = {}
 // new navigation.
 // scroll to anchor by returning the selector
 if (to.hash) {
 position.selector = to.hash
 }
 // check if any matched route config has meta that requires scrolling to top
 if (to.matched.some(m => m.meta.scrollToTop)) {
 // cords will be used if no selector is provided,
 // or if the selector didn't match any element.
 position.x = 0
 position.y = 0
 }
 // if the returned position is falsy or an empty object,
 // will retain current scroll position.
 return position
 }
}
const router = new VueRouter({
 mode: 'history',
 base: __dirname,
 scrollBehavior,
 routes: [
 { path: '/', component: Home, meta: { scrollToTop: true }},
 { path: '/foo', component: Foo },
 { path: '/bar', component: Bar, meta: { scrollToTop: true }}
 ]
})

new Vue({
 router,
 template: `
 <div id="app">
 <h1>Scroll Behavior</h1>
 <ul>
 <li><router-link to="/">/</router-link></li>
 <li><router-link to="/foo">/foo</router-link></li>
 <li><router-link to="/bar">/bar</router-link></li>
 <li><router-link to="/bar#anchor">/bar#anchor</router-link></li>
 </ul>
 <router-view class="view"></router-view>
 </div>
 `
}).$mount('#app')

在網上查了一下,網友說還可以試試在main.js入口文件配合vue-router寫這個

router.afterEach((to,from,next) => {
 window.scrollTo(0,0);
});

總結

以上所述是小編給大家介紹的vue中使用vue-router切換頁面時滾動條自動滾動到頂部的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

vue中使用vue-router切換頁面時滾動條自動滾動到頂部的方法

vue中使用vue-router切換頁面時滾動條自動滾動到頂部的方法:有時候我們需要頁面滾動條滾動到某一固定的位置,一般使用Window scrollTo() 方法。 語法就是:scrollTo(xpos,ypos) xpos:必需。要在窗口文檔顯示區左上角顯示的文檔的 x 坐標。 ypos:必需。要在窗口文檔顯示區左上角顯示的文檔的 y 坐標。 例如滾動內
推薦度:
標簽: VUE 滾動 中使用
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 国产在线观看第一页 | 国产片91 | 亚洲精品乱码久久久久久 | 99热成人精品国产免国语的 | 国产精品久久久久久久久久久不卡 | 一级一级特黄女人精品毛片视频 | 日韩免费在线观看视频 | 欧美日韩国产在线成人网 | 亚洲免费网站观看视频 | 黄网站色视频免费观看 | 国产在线视欧美亚综合 | 日本韩国一区二区 | 国产一区二区福利 | 欧美一区二区在线 | 久久久国产精品视频 | 久久国产精品高清一区二区三区 | 国产成人h福利小视频在线观看 | 国产第八页 | 国产成人综合久久精品下载 | 91视频一区二区三区 | 国产精品久久久天天影视香蕉 | 国产成人+综合亚洲+天堂 | 五十路中文字幕 | 日韩经典第一页 | 国产真实乱人视频在线看 | 成人a毛片久久免费播放 | 精品久久久久中文字幕日本 | 成人区精品一区二区毛片不卡 | 制服丝袜一区二区三区 | 亚洲欧美另类在线观看 | 91中文视频 | 极品美女一区二区三区 | 亚洲精国产一区二区三区 | 不卡在线一区 | 北条麻妃 在线 | 欧美激情一区二区三区视频 | 538精品在线视频 | 国产精品成人一区二区 | 精品久久中文网址 | 国产欧美一区二区精品久久久 | 香港一级a毛片在线播放 |