使用keep-alive记录上一次滚动的位置，等到返回时仍然滚到之前的位置

最新推荐文章于 2023-05-26 08:00:00 发布

努力的小蜗牛Zzz

最新推荐文章于 2023-05-26 08:00:00 发布

阅读量711

点赞数 1

本文链接：https://blog.csdn.net/flyaway0624/article/details/116999454

版权

本文介绍了如何利用keep-alive组件在Vue中实现页面状态保存，特别是记录并恢复用户滚动条位置。通过在页面上应用keep-alive，设置路由的keepAlive属性为true，以及在列表组件中配合scroller和activated生命周期钩子，可以确保用户在返回时能回到离开时的滚动位置。

摘要由CSDN通过智能技术生成

1.首先对当前页面加上keep-alive

<template>
<div>
    <keep-alive>
        <router-view  :filter-account="filterAccount" @setFilterAccount="setFilterAccount"
        :filter-account-id="filterAccountId" v-if="$route.meta.keepAlive" @setFilterAccountId="setFilterAccountId"></router-view>
    </keep-alive>
</div>
</template>

2.在路由文件里面加上keepAlive: true

3.在列表组件的列表外面包裹一层scroller

<scroller
                :class="hackcss"
                ref="scroller"
                :on-refresh="refresh"
                :on-infinite="loadMore"
                :no-data-text="text">