移动端详情返回列表页时,记录滚动条位置,踩了不少坑之后,终于有效解决,特此记录
要用到keep-alive缓存,及缓存时用到的activated和deactivated两个生命周期函数
1:首页在App.vue和路由中配置keep-alive缓存
<div id="app">
<!--根据keepAlive,判断页面是否需要缓存-->
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
router中
{
path: '/app/checkList',
name: 'checkList',
// 加入keepAlive,不需要缓存的页面不用加
meta: {
keepAlive: true
},
component: () => import('@/views/checkList/checkList.vue')
},
2.列表-list页面:页面用的vantUI的list,如果是其他标签,只需要找到对应的scrollTop就可
点击列表项进入详情时,保存scrollTop,从详情返回列表时,列表数据已被缓存,