Ionic 页面缓存

　　既然是随笔,那肯定不是'有备而来'.

　　起因当然也是因为客户的需求,我最近在着手商城类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' 即可.

转载于:https://www.cnblogs.com/wangshengl/p/5639796.html