vue的 keepAlive 记录列表页的浏览位置

divlingder

已于 2023-03-10 11:54:11 修改

阅读量547

点赞数 1

文章标签： vue.js javascript 前端

于 2021-11-03 15:25:58 首次发布

本文链接：https://blog.youkuaiyun.com/divlingder/article/details/121121314

版权

本文介绍了一种在移动端应用中实现列表页面滚动位置记忆的方法。通过使用Vue.js结合特定的生命周期钩子和滚动事件监听，确保用户在浏览详情页后返回时能够回到之前的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、最近在做移动端的首页时有列表点击进去详情页，再返回时列表页的浏览位置不变的功能。如下：

Js记录页面浏览位置_哔哩哔哩_bilibili

2、上代码

在app.vue中：

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

在路由文件中：

const routes = [
    ...homeRouter,
    
]

let HomeRouter = [{
        path: "/home",
        name: "Home",
        component: () =>
            import ('@/views/home/index.vue'),
        meta: {
            title: '首页',
            keepAlive: true
        }
    },
]
export default HomeRouter

在js中：

<script> 
export default { 
 data() {
    return {
      scrollTops:"",
    };
  },
activated () {   // 路由跳转回来滚动到离开时的位置
    this.$nextTick(() => {
       this.$refs.container.scrollTop = this.scrollTops;
    })
  },
  methods: {
    scrollEvent(e){  //  监听滚动距离
      this.scrollTops = e.target.scrollTop;
   },
  },
},
</script>

html中：

<template>
  <div class="container" @scroll="scrollEvent" ref="container">
    <div class="topCon">
    </div>
   </div>
</template>
<style lang="scss" scoped>
.container {
  background: #f2f2f2;
  height: 100%; // 这个很关键
  overflow: auto;//这个很关键
}
</style>

在最后提示一下：监听事件scrollEvent触发，一定要加上以上css属性哦！