項目遇到的問題以及解決方法---h5頁面回退,保留前一個頁面用戶瀏覽位置

具體需求描述:一個h5的產品列表頁,用戶滑動列表頁,當用戶滑動到感興趣的產品,點擊進入詳情頁,瀏覽完詳情頁在回退到列表頁能保留之前用戶瀏覽位置。(react下開發)

1.開始什麼都沒做,回退的時候自然無法保留用戶瀏覽位置。

2.然後考慮怎麼解決,最開始的想法是保留scrolly的值,在回退的時候使用window.scrollTo()強制回退到上次瀏覽位置。但是這面臨着一個問題,回退相當於重新加載頁面,所以scrolly的值只能保存在緩存中,但是如果保存在緩存中,那用戶不是通過回退,而是重新加載頁面也會保留最早瀏覽的位置,這就不合理了。那怎麼辦?又開始考慮判斷進入頁面的來源,來做不同的處理,但這似乎太麻煩了。。

3.在看文檔的時候看到頁面緩存,對啊,可以採用頁面緩存啊,如果我們在回退的時候不是重新加載頁面而是才用之前瀏覽的緩存頁,不就可以保存用戶位置了嗎,由於使用公司內框架,有緩存頁面的字段,就直接使用了,如果是完全自己做,應該是shouldComponentUpdate函數來判斷到底需不需要刷新吧。

4.這個問題擴展一下,就是在h5頁面(react)中,有需要爲用戶保存的信息(用戶填寫信息,瀏覽位置等等),當你從這個頁面跳轉到其他頁面,在回退的時候,需要原頁面不重新刷新,而是保存跳轉之前,這時候就需要頁面緩存技術(react中有關Update的生命週期函數),後邊需要好好看下。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章