vue 缓存页面并保留页面当前位置

用户从页面A跳转到页面B,过一会又返回页面A,并且希望页面A依然保留着上次离开时所浏览的位置。该如何实现呢?

步骤 

  1. 用 <keep-alive> 包裹页面组件,以缓存页面状态。包裹后,页面组件会增加 activateddeactivated 两个生命周期,前者在进入页面时触发,后者在离开页面时触发。由于页面被缓存,因此不会再触发 destroy 和 create 。
  2. 在生命周期函数 deactivated 中,记录离开时的位置,存于data中。
  3. 在生命周期函数 activated 中,将页面滚动到上次离开的位置。

代码

在App.vue中,用 <kepp-alive> 将 <router-view> 包裹。

<template>
  <div id="app">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <main-tab-bar></main-tab-bar>
  </div>
</template>

某页面.vue 的 activated 和 deactivated 生命周期函数中写下这些代码。:这里用了BScroll框架封装scroll,故需自行修改。

  activated() {
    this.$refs.scroll.scrollTo(0, this.saveY, 0);//跳转到(0,this.saveY)的位置,时间为0
    this.$refs.scroll.refresh();//BScroll需要经常刷新,不然会有问题
  },
  deactivated() {
    this.saveY = this.$refs.scroll.scroll.y;//离开页面时,存储位置
  },

 

  • 0
    点赞
  • 0
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值