我們在vue開發中經常會碰到一種需求, 返回頁面後需要定位到滾動條指定位置, 以增強用於體驗. 比如在a頁面,它是個列表, a頁面是不做分頁的. 最常見的就是小說類網站的目錄頁. 或者後臺類網站列表 包含查看更多按鈕這種的. 也就是說這種頁面我們想觀看更多內容, 不然出現滾動條. 但因爲vue是單頁應用, 當我們點擊其中一條數據, 進入b頁面. a頁面就銷燬了. 再從b返回到a時, a頁面會重新加載, 導致用戶需要重新手動定位點進去的位置. 很麻煩. 最近實踐了幾種方法, 現在和大家分享一下:
1. a傳遞參數到b -> 從b返回時回傳參數 -> a拿到參數循環列表找到具體位置 -> 定位位置
2. a跳轉到b時記下scrollTop -> b返回時直接定位scrollTop
第一種分析:
聽起來挺簡單的, 但要結合到具體場景, 還是要做一些思考的. 比如你的需求是從小說的目錄頁到閱讀頁 閱讀頁再返回時需要定位章節位置, 且當前章節文字變色 加粗. 這樣就只能用第一種方法. 因爲一般網站在閱讀頁可以操作上一章和下一章. 所以這時候你如果記下目錄頁的scrollTop是沒有意義的.因爲章節是實時變化的, 並且要操作dom. 所以只能用第一種;這裏拿小說類網頁舉例說明; a頁面跳轉到b的時候傳遞章節名稱到b, 這時候如果從b反回到a了. 直接循環列表找到當前章節並定位. 但如果用戶在閱讀頁操作上一章或者下一章了;這時候要把當前的目錄的名稱同步push到url;否則返回的章節名稱就不準確了;這個時候需要注意一個小的問題.不要在created裏操作定位;是操作不了的.mounted的時候纔可以操作;
第二種分析:
第二種方法適合後臺類的管理系統, 從列表頁進入詳情頁這種場景. 比如列表頁沒有分頁, 採用的查看更多去查看更多內容.這個時候只要點擊列表就先記下scrollTop; 進入b頁面後再返回直接定位scrollTop就可以了; 但這種場景結合緩存實現比較好.因爲b返回a後還得發送請求, 這個時候你要想定位的話, 又牽扯到page和pageSize. 因爲用戶很可能點擊了好幾次查看更多; 或者你還得傳遞page和pageSize到b; 這樣實現起來比較麻煩; 建議採用緩存的方式; 這些小項目其實不太建議上vuex; 直接建一個js模塊;a跳轉的時候把data和scrollTop存到這個js模塊中; 然後b返回a後再a頁面判斷是不是返回了, 如果返回了, 就從js模塊中取data渲染並定位scrollTop; 否則不是返回的話就執行默認請求ajax的操作; 但這種方法也有個缺陷, 用戶如果在b刷新頁面了, js模塊中的數據和scrollTop就不存在了; 你如果非常介意這個問題的話, 也可以使用localStorage存儲; 但用本地存儲我也做了研究, 也有幾個小問題,就是你需要clearStorage; 這個時候又要判斷用戶是刷新了還是真的關閉頁面; 另外, 畢竟內存比磁盤的讀取速度快多了; 綜合考量下, 領導決定用全局data方式這種;
最近開發實在太忙了; 寫的比較少了; 沒辦法, 得掙錢啊; 這次也沒配圖; 簡單說說; 有任何疑問都可以留言; 我都會回覆答;
因爲我們公司是小說類產品的, 所以對小說類很熟悉; 整個的移動端網站是我做的; 以後有時間再好好說說小說閱讀器的做法和注意事項;