實用的滾動

zzir 發布于2019-08-21 16:27 / 3427人閱讀

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

滾動行為

==用戶良好的交互體驗==

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

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

具體方法實例

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

to要去的路由
from 離開的路由對象
savedPosition 當且僅當 popstate 導航 (通過瀏覽器的前進/后退按鈕觸發) 時才可用。

滾動行為傳遞的值

即return后面的值的類型

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

string 為to.hash值帶#的

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

GPU云服務器云服務器實用的語言編程超實用的代碼段小程序的實用方法實用的小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88567.html

實用的滾動

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

RichardXG 2019-08-01 17:36 評論0 收藏0
前端實用知識

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

luckyw 2019-08-30 15:55 評論0 收藏0
前端實用知識

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

CoyPan 2019-08-23 15:14 評論0 收藏0
前端實用知識

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

bovenson 2019-08-02 14:15 評論0 收藏0