實(shí)用的滾動(dòng)

RichardXG 發(fā)布于2019-08-01 17:36 / 1543人閱讀

摘要：滾動(dòng)行為用戶良好的交互體驗(yàn)功能使用前端路由，當(dāng)切換到新路由時(shí)，想要頁面滾到頂部，或者是保持原先的滾動(dòng)位置，就像重新加載頁面那樣。具體方法實(shí)例期望滾動(dòng)到哪個(gè)的位置要去的路由離開的路由對(duì)象當(dāng)且僅當(dāng)導(dǎo)航通過瀏覽器的前進(jìn)后退按鈕觸發(fā)時(shí)才可用。

滾動(dòng)行為

==用戶良好的交互體驗(yàn)==

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

注意事項(xiàng)
這個(gè)功能只在 HTML5 history 模式下可用。

具體方法實(shí)例

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

to要去的路由  
from  離開的路由對(duì)象
savedPosition 當(dāng)且僅當(dāng) popstate 導(dǎo)航 (通過瀏覽器的 前進(jìn)/后退 按鈕觸發(fā)) 時(shí)才可用。

滾動(dòng)行為傳遞的值

即return后面的值的類型

{ x: number, y: number }
{ selector: string }

string 為to.hash值帶#的

附上小案例
https://hxj886600.github.io/v...

云服務(wù)器 GPU云服務(wù)器實(shí)用的語言編程超實(shí)用的代碼段小程序的實(shí)用方法實(shí)用的小程序

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/51254.html

相關(guān)文章

實(shí)用的滾動(dòng)

摘要：滾動(dòng)行為用戶良好的交互體驗(yàn)功能使用前端路由，當(dāng)切換到新路由時(shí)，想要頁面滾到頂部，或者是保持原先的滾動(dòng)位置，就像重新加載頁面那樣。具體方法實(shí)例期望滾動(dòng)到哪個(gè)的位置要去的路由離開的路由對(duì)象當(dāng)且僅當(dāng)導(dǎo)航通過瀏覽器的前進(jìn)后退按鈕觸發(fā)時(shí)才可用。滾動(dòng)行為 ==用戶良好的交互體驗(yàn)== 功能使用前端路由，當(dāng)切換到新路由時(shí)，想要頁面滾到頂部，或者是保持原先的滾動(dòng)位置，就像重新加載頁面那樣。 vu...

zzir 2019-08-21 16:27 評(píng)論0 收藏0
前端實(shí)用知識(shí)

摘要：開發(fā)中的實(shí)踐盡量使用更換實(shí)現(xiàn)樣式變化。原因事件存在毫秒延時(shí)。解決方法移動(dòng)端使用事件。文本顯示省略號(hào)顯示省略號(hào)的基本條件元素定長(zhǎng)。單行顯示省略號(hào)多行顯示省略號(hào)目前只有內(nèi)核支持此屬性和手機(jī)端內(nèi)核以及瀏覽器默認(rèn)字體瀏覽器默認(rèn)字體是。 1、輸入U(xiǎn)RL到顯示網(wǎng)頁，中間發(fā)生了什么 DNS(完成域名到IP的映射)-->TCP傳輸(三次握手建立傳輸鏈接)-->發(fā)送請(qǐng)求(分析url，設(shè)置請(qǐng)求頭、主體)-...

luckyw 2019-08-30 15:55 評(píng)論0 收藏0
前端實(shí)用知識(shí)

摘要：開發(fā)中的實(shí)踐盡量使用更換實(shí)現(xiàn)樣式變化。原因事件存在毫秒延時(shí)。解決方法移動(dòng)端使用事件。文本顯示省略號(hào)顯示省略號(hào)的基本條件元素定長(zhǎng)。單行顯示省略號(hào)多行顯示省略號(hào)目前只有內(nèi)核支持此屬性和手機(jī)端內(nèi)核以及瀏覽器默認(rèn)字體瀏覽器默認(rèn)字體是。 1、輸入U(xiǎn)RL到顯示網(wǎng)頁，中間發(fā)生了什么 DNS(完成域名到IP的映射)-->TCP傳輸(三次握手建立傳輸鏈接)-->發(fā)送請(qǐng)求(分析url，設(shè)置請(qǐng)求頭、主體)-...

CoyPan 2019-08-23 15:14 評(píng)論0 收藏0
前端實(shí)用知識(shí)

摘要：開發(fā)中的實(shí)踐盡量使用更換實(shí)現(xiàn)樣式變化。原因事件存在毫秒延時(shí)。解決方法移動(dòng)端使用事件。文本顯示省略號(hào)顯示省略號(hào)的基本條件元素定長(zhǎng)。單行顯示省略號(hào)多行顯示省略號(hào)目前只有內(nèi)核支持此屬性和手機(jī)端內(nèi)核以及瀏覽器默認(rèn)字體瀏覽器默認(rèn)字體是。 1、輸入U(xiǎn)RL到顯示網(wǎng)頁，中間發(fā)生了什么 DNS(完成域名到IP的映射)-->TCP傳輸(三次握手建立傳輸鏈接)-->發(fā)送請(qǐng)求(分析url，設(shè)置請(qǐng)求頭、主體)-...

bovenson 2019-08-02 14:15 評(píng)論0 收藏0