vue keepAlive实现列表页面缓存

需求

订单列表，点击去详情页，再返回列表，要保持上次滑动的位置。且详情页面可以进行增删改查操作，返回列表要使当前tab下的列表状态为最新。

基本html结构

<div id="#app">
	<div class="wraper">
		<div class="inner">
			<div v-for="item in list" :key="item.id">{{item}}</div>
		</div>
	</div>
</div>

实现思路（3步完成基本功能）

• vue提供了keep-alive组件,套在<router-view v-if="$route.meta.keepAlive">外层
• 列表页路由配置: meta: {keepAlive: true}
• 页面样式修改，要让文档能滚动。之前项目发现不能保持滚动条，就是因为设置了元素.wraper为绝对定位。
  ！这个keep-alive组件必须要让文档document滚动，才有效果。注意设置overflow: auto，不能html, body同时设置

设置overflow: auto的元素	滚动条属于	能否保存滚动位置
html & body	body	不能
html或body	document, window	能
!html & !body(都不设置)	document, window	能

自定义上拉加载（监听滚动条事件）

• 定义三个变量：viewHeight(窗口高度), itemListHeight(元素撑起来的高度), scrollHeight(文档滚动出去距离顶部的高度)
• itemListHeight - viewHeight - scrollHeight < 20 加载新一页
• 文档距离顶部滚动距离兼容写法：

  // document.compatMode: 'BackCompat' 混杂模式/怪异模式 | 'CSS1Compat' 标准模式
  // window.pageYOffset 是 window.scrollY  的别称。旧版本IE（<9）两个属性都不支持
  
  var supportPageOffset = window.pageXOffset !== undefined;
  var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
  
  var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
  var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
  

列表及时刷新且保存滚动条位置处理

• 存储点击的该订单对象obj1和下标index1
• 如果详情做了增删改查等操作，都会重新请求一次订单详情接口，得到新的订单详情对象。用路由守卫，beforeRouteLeave方法中，存储订单详情对象obj2
• 返回列表activated，判断obj1和obj2订单编号一致，相同订单关键值如订单状态是否一致，如果不一致，则分情况：全部tab下，修改该订单为新状态，其他状态tab下，删除该订单
• 如果订单详情操作的订单关联列表中不定量个其他订单。则一返回列表，应该刷新当前tab，且要请求size为 ( parseInt(index1/10) + 1 ) * 10条，我这里分页是默认一页十条，多刷新出10条是考虑当前点击的刚好index1某一页的末尾一条，同时后一页也加载并展示在页面了。下拉刷新时候保持size为同一个size。切换为其他tab时，可以重置size为10。

需要注意的问题

• 如果列表和详情，有监听同一个vuex值的watcher, 需要改，因为列表缓存了之后，详情里watcher不会生效。
• 列表tab页签每次切换也会保存滚动条状态。需要切换页面后，加载数据前，清空列表数据源。