vue3 keep-alive跳转回来后 scroll位置丢失


在 Vue3 中,使用  组件确实可以缓存组件状态,避免重复渲染,但它并不直接处理滚动位置的恢复。当页面跳转回来后,如果发现滚动位置scrollTop丢失,可以通过以下方法来解决这个问题:

涉及到在组件的  onBeforeRouteLeave 钩子中保存滚动位置,在  onActivated 钩子中恢复滚动位置。

添加导入

JavaScript 全选
import { ref, onMounted, onActivated } from 'vue';
import { onBeforeRouteLeave } from 'vue-router';

在 Vue3 中,onBeforeRouteLeave Vue Router 的导航守卫,而不是 Vue 本身的生命周期钩子。因此,你需要从 vue-router 中导入它,而不是从 vue。

逻辑实现

JavaScript 全选
// 保存的滚动位置
let savedScrollTop = 0;
const scrollContainer = ref(null);

onActivated(() => {
  // 从 keep-alive 缓存中恢复时,恢复滚动位置
  console.log('onActivated savedScrollTop == ', savedScrollTop)
  if (savedScrollTop > 0) {
    scrollContainer.value.scrollTop = savedScrollTop;
  }
});

onBeforeRouteLeave(() => {
  // 保存滚动位置到路由元信息
  savedScrollTop = scrollContainer.value.scrollTop
  console.log('onBeforeRouteLeave savedScrollTop == ', savedScrollTop)
});

 

编写为自定义指令,方便使用

vue3 + javascript:src/directives/saveScrollTop.js

C# 全选
// import router from '@/router'
import { onBeforeRouteLeave } from 'vue-router'

export default {
  name: 'saveScrollTop',
  savedScrollTop: 0,
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
    console.log('v-saveScrollTop created')
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {
    console.log('v-saveScrollTop beforeMount')
  },
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {
    console.log('v-saveScrollTop mounted')

    // onBeforeRouteLeave(() => {
    //   // 保存滚动位置到路由元信息
    //   binding.dir.savedScrollTop = el.scrollTop
    //   console.log('onBeforeRouteLeave savedScrollTop == ', binding.dir.savedScrollTop)
    // })
    el.__scrollHandler = () => {
      binding.dir.savedScrollTop = el.scrollTop
      console.log('v-saveScrollTop savedScrollTop == ', binding.dir.savedScrollTop)
    }

    el.addEventListener('scroll', el.__scrollHandler)
  },
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {
    console.log('v-saveScrollTop beforeUpdate')
  },
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {
    console.log('v-saveScrollTop updated')
    console.log('onActivated savedScrollTop == ', binding.dir.savedScrollTop)
    if (binding.dir.savedScrollTop > 0) {
      el.scrollTop = binding.dir.savedScrollTop
    }
  },
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {
    console.log('v-saveScrollTop beforeUnmount')
    el.removeEventListener('scroll', el.__scrollHandler)
  },
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {
    console.log('v-saveScrollTop unmounted')
  }
}

main.js中注册指令

JavaScript 全选
import saveScrollTop from './directives/saveScrollTop'
const app = createApp(App)
// 注册全局指令
app.directive(saveScrollTop.name, saveScrollTop)

使用:

在需要保存滚动位置的元素中,使用指令 v-saveScrollTop

vue3 keep-alive跳转回来后 scroll位置丢失

 

 

版权声明:本文为YES开发框架网发布内容,转载请附上原文出处连接
张国生
上一篇:vant4文档官网
下一篇:vscode 左下角的状态栏出现 '正在初始化 JS/TS 语言功能'导致编辑器的提示功能失效
评论列表

发表评论

评论内容
昵称:
关联文章

vue3 keep-alive回来 scroll位置丢失
VUE3版本 页面切换数据丢失问题
vue 路由的几种方式(带参数)
路由以及参数处理
VUE IIS根据访问端自动适合的链接
VUE3监听div滚动,滚动超出折叠collapse组件
vue3+vist 打包空白
VUE Cli3项目添加LESS支持
页面没有缓存,Keep-alive失效
CodeMirror配合js-beautify格式化代码,光标恢复到原来位置
C#汉字拼音
DevExpress表格GridControl添加操作列单元格添加图片按钮并且实现点击链接URL浏览器
vue3 组合模式 组件自己引用自己 递归组件 组件命名
vue3重新封装element-plus组件库的按钮组件el-button
vue3 ts setup 封装element-plus el-dialog,并使用v-model
Vue 3 中,嵌套数据源且需要过滤内部数据源
vscode使用vue3+ts时代码提示问题
vue vue-clie多环境配置
git rebase 找回丢失的代码
vue3使用ts开发自定义组件,对外开放方法

联系我们
联系电话:15090125178(微信同号)
电子邮箱:garson_zhang@163.com
站长微信二维码
微信二维码