【工作】keep-alive+van-list 实现滑动位置保留

项目场景：

点击这里是之前实现的方案

问：很常见的一个场景，拿淘宝举例，比如浏览购物车时，发现一个商品很吸引你，点击进去查看该商品详情，再返回到购物车页面时，是否应该停留当前浏览的商品位置上呢？

答：yes，否则让我自己一个一个往下翻嘛？（白眼🙄️）

---

之前方案问题描述

例如：
1.需要兼容ios和安卓机型
2.由于是在每一个请求后进行滑动，数据没回来，滑动终止
3.等等等等

试想一下，如果这样一个产品摆在你面前，你还想要用它嘛？我是不想（虽然开发时，我并没想到这些，仅仅是为了实现原型图上画出、标记出的功能）但是，我们应该做一个有思想的搬砖人🧱哈哈哈哈哈😂

---

解决方案：

keep-alive

大致思路：
1.通过keep-alive缓存页面
2.在路由内监听滑动
3.通过meta中的值进行滑动赋值
4.不想保留滑动的不进行赋值

<keep-alive>
   <router-view v-if='$route.meta.keepAlive'/>
</keep-alive>
<router-view  v-if='!$route.meta.keepAlive'/>

// main中记录滑动
router.beforeEach((to, from, next) => {
   if (from.meta.keepAlive) {
     const $wrapper = document.querySelector('.index-tab-content'); // 列表的外层容器 注意找到滚动的盒子
     const scrollTop = $wrapper ? $wrapper.scrollTop : 0;
     console.log('scrollTop=', scrollTop)
     from.meta.scrollTop = scrollTop;
   }
   next();
 });

// 通过mixins，需要缓存滑动的页面直接引入mixins
const scrollTop = this.$route.meta.scrollTop;
const $wrapper = document.querySelector('.index-tab-content');
if (scrollTop && $wrapper) {
    $wrapper.scrollTop = scrollTop;
}

总结

这样实现是不是好多了呢？不需要考虑ios和安卓差异性的问题。不需要考虑这个页面需要缓存滑动，再次实现滑动的问题。也不需要考虑数据没返回之后，滑动失败的问题。欢迎大家一起交流～～