vue 移动端详情返回列表，列表滚动到离开时的位置

jqh_0484

已于 2023-09-22 15:48:27 修改

阅读量189

点赞数 1

文章标签： vue.js 前端 javascript

于 2023-09-22 10:37:48 首次发布

本文链接：https://blog.csdn.net/qq_37309987/article/details/133141943

版权

文章介绍了如何在Vue.js应用中，通过keepAlive缓存列表数据并利用scrollTop记录列表离开时的位置，确保用户从详情返回列表时能自动滚动到之前的位置。

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

问题描述：移动端用户从列表进入详情，返回列表页面时，列表在离开时的位置。

解决方案：使用 vue2.js keepAlive 缓存列表数据，scrollTop 方法记录列表离开时的位置，并在详情返回列表时将列表页面滚动到所记录的位置。

1、路由的修改

{

    path: '/list',
    name: 'list',
    meta: { 
        keepAlive: true
    },
    component: () => import('@/list')
}

2、App.vue页面修改

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

3、列表页面修改

<template>
  <div class="list" ref="listRef">
    <ul ref="ulRef">
      <li v-for="item in list" :key="item.id" @click="handleJumpDetail(item)">{{
        item.title
      }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'testList',
  data() {
    return {
      list: []
    };
  },
  mounted() {
    this.list = this.initData();
  },
  activated() {
    const scrollTop = sessionStorage.getItem('scrollTop');
    if (scrollTop) {
      this.$nextTick(() => {
        this.$refs.ulRef.scrollTop = scrollTop;
      });
      sessionStorage.removeItem('scrollTop');
    }
  },
  beforeRouteLeave(to, from, next) {
    // 注意点：获取scrollTop的值时，ref取的是滚动容器的ref值，即第一个设置了scroll的父容器标签 ulRef
    sessionStorage.setItem('scrollTop', this.$refs.ulRef.scrollTop);
    next();
  },
  methods: {
    // 初始化数据
    initData() {
      const list = [];
      for (let i = 0; i < 100; i++) {
        list.push({
          id: i,
          title: `测试数据${i}`
        });
      }
      return list;
    },

    // 跳转详情
    handleJumpDetail({ id }) {
      this.$router.push({
        path: `/user/detail`,
        query: {
          id
        }
      });
    }
  }
};
</script>

<style scoped>
.list {
  height: 100vh;
  overflow-y: scroll;
  background-color: #fff;
}

ul {
  height: 90vh;
  overflow-y: scroll;
  border: 1px red solid;
}

ul li {
  height: 48px;
  line-height: 48px;
  padding: 0 15px;
}

ul li:nth-child(2n) {
  background-color: #f5f5f5;
}
</style>