既然是隨筆,那肯定不是'有備而來'.
起因當然也是因為客戶的需求,我最近在着手商城類APP,所以客戶對我提了一個需求:
"商品列表 --> 商品詳情 -->返回商品列表的時候,要停留在進去的那個位."
簡單說一下'商品列表'這個頁面吧,我使用的是angular+ionic框架設計的頁面,而商品數量太多,不可能一次性加載出來,所以設計了分頁.同時,項目使用了requirejs + angularjs 的集成去設計路由(這個暫時沒有弄懂..),
所以商品列表和商品詳情屬於不同的$state,當'商品列表'跳轉到'商品詳情'的時候,這是一個頁面跳轉路由的事件,所以新的頁面會重新渲染,所以無論是'列表 -->詳情' 還是'詳情 --> 列表',頁面都是重新渲染的,不會記錄並返回上次的瀏覽位置.
說是這么說,但既然客戶提了需求,那么沒辦法,只能埋頭去查資料了.
后來在網上看到了這樣一句話:
"當用戶在你的app中瀏覽時，ionic能夠檢測到瀏覽歷史。通過檢測瀏覽歷史，實現向左或向右滑動時可以正確轉換視圖。" 后,我就知道有戲了,既然能檢測到瀏覽歷史,那么肯定也能記錄瀏覽歷史的位置.
先附上文檔鏈接
<ion-nav-view>
用ionNavView指令在你的app中渲染模版。每個模板都是狀態的一部分。狀態通常映射到一個url上，然后用angular-ui-router定義程序 -- 文檔解釋
我剛看到的時候,覺得這句文檔解釋也是挺抽象的,后面也看了看文檔的案例,代碼什么的,發現<ion-nav-view>在文檔中,主要用於導航作用,就是類似於一個導航上面有幾個按鈕(這幾個按鈕的實現需要使用<ion-nav-bar>,我這里不需要導航功能,所以就沒有使用),然后點擊幾個按鈕實現不同的頁面效果.
關鍵之處在於,<ion-nav-view>有一個隸屬於它的下級,<ion-view>,<ion-view>有一個屬性,cache-view(boolean),顧名思義(我這個英語渣都能看懂- -) 緩存-視圖,當<ion-view ceche-view='true'>的時候,用戶的需求就解決了.該功能的作用,恩,打個比方說:商品列表一頁加載10個商品,當我瀏覽到52個商品的時候(這時候已經上拉加載4次數據了),點進商品詳情,看了會兒,又返回商品列表,依然停留在我點擊進去的那個歷史位置,第52個商品所在的頁面位置,而不是頁面的頂部.
所以整個需求只需要在頁面最頂部添加<ion-nav-view>指令,然后再指令內部添加<ion-view> 設置其cache-view='true' 即可.