vue使用keep-alive保持滚动条位置的实现方法

2024-09-28 00:29:08

前言

下班前，20分钟，发一篇。。。

简单介绍，使用keep-alive的时候，返回前一页，没有保持滚动条位置。

事实上，就算不使用keep-alive，位置也没有被记录。

但是，在不适用keep-alive的时候，页面内容会刷新，所以就随他去了……就是这么任性……

思路

官方有推荐一个scrollBehavior，链接，但是上面标注，只在history.pushState的浏览器生效，不知道是不是只能开启history.pushState才可以使用，看了下实现，挺不友好的，还是自己搞一个吧。。。

实现思路是这样的，首先给路由增加一个对象meta：

meta: {
  keepAlive: true,
  scrollTop: 0,
}

keepAlive是否需要保持页面，scrollTop记录页面的滚动位置。

然后在app.vue增加如下入口：

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

这样就启用keep-alive了。

然后在全局main.ts增加一个全局路由控制：

router.beforeEach((to: Route, from: Route, next: () => void) => {
  if (from.meta.keepAlive) {
  const $content = document.querySelector('#content');
  const scrollTop = $content ? $content.scrollTop : 0;
  from.meta.scrollTop = scrollTop;
 }
 next();
});

很简单，离开的时候判断当前页是否需要保持页面，如果需要，记录页面主容器content的滚动位置，写入路由。

然后，每次进入保持好的页面，读取滚动条位置scrollTop，修改主容器的scrollTop，就搞定了：

public activated() {
  const scrollTop = this.$route.meta.scrollTop;
  const $content = document.querySelector('#content');
  if (scrollTop && $content) {
   $content.scrollTop = scrollTop;
  }
}

看起来很简单哦。

遗留问题

1、是不是每个页面都可以记录滚动条位置呢？

其实不是的，有的页面，内部有js交互，比如tab交互，不同的tab，页面可滚动的高度不一致，如果不保持页面状态而统一记录滚动位置，有可能导致滚动条的位置错位。

2、能不能把activated这一步写到全局的main.ts或者state去呢？

有想过这点，但是目前来说，没找到实现的方法。

首先，如果通过router来控制，做不到，全局路由控制只能在页面加载前监听，取不到载入页的元素。

如果写在一个通用的全局函数去控制，比如定义一个state，当页面加载完的时候设置，那需要定义一个mixins来处理，但是对这个mixins不太熟悉，暂时还不知道该怎么做，可能有时间找个方法搞定它。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue 无限滚动加载指令实现方法

也不存在什么加载咯, 就是一个判断滚动条是否到达浏览器底部了. 如果到了就触发事件,米到就不处理. 计算公式提简单的底部等于(0) = 滚动条高度 - 滚动条顶部距离 - 可视高度. 反正结果就是0. 一.获取滚动条位置 class Scroll { static get top() { return Math.max(document.documentElement.scrollTop || document.body.scrollTop); } static get clientH
Vue.js+cube-ui（Scroll组件）实现类似头条效果的横向滚动导航条

本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也就是手机上,我们页面的宽度并不像PC端那样大,可以显示很长的导航项,但对于我们移动端来说,由于功能的拓展,或者业务的细分,往往导航项也会随之增多,一旦超过移动端在一行的页面显示宽度,那便会出现导航项换行的现象,虽说也有这样布局,但一旦导航项增多到一定程度的时候,我们的页面(首页)将均被导航项霸占,这
vue滚动tab跟随切换效果

分享一个我前几天做的移动端 tab滚动跟随的例子随着滚动条的滚动,tab会对应进行切换首先我们需要监听当前页面的滚动 mounted(){ //记录每个内容对用的dom数组 this.arrDom = document.getElementsByClassName("item-content"); window.addEventListener('scroll', this.handleScroll); }, destroyed(){ window.removeEventListe
vue的滚动条插件实现代码

这篇文章主要介绍了vue的滚动条插件实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下效果如下代码如下 <template> <div class="vue-scroll" ref="vueScrollW"> <div class="vue-scroll-w" ref="vueScroll" > <div class=&quo
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效

实现目标浏览各大云平台,发现一个页面特效使用较为频繁,以"百度云"为例(https://cloud.baidu.com/),进入百度云后,当滚动条滚动至"更可靠的数据支持"模块时,页面数据将会开始滚动式增长特效.下面将会介绍我的解决方案,希望有同行更好的解决方案大家一起交流. 解决思路主要的解决要点如下: 如何实现数字动画的效果如何监听滚动条到指定的位置分解要点寻找解决思路: 一.如何实现数字动画的效果在vue的官方文档(https://cn.vuejs.
vue 实现滚动到底部翻页效果(pc端)

pc端vue 滚动到底部翻页效果,具体内容如下所示: html: <div class="list" ref="scrollTopList"> <div class="listsmall" v-for="(item,index) of list" :key="index" @click="getDeviceInfo(item.id)"> <span cla
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)

mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.adjustTable(event); }); }, ...... // target中的属性很多,可以通过控制台查看--clientWidth可以获取除滚动条外的可视区域宽度 adjustTable(event) { this.clientWidth = event.target.cli
vue移动端监听滚动条高度的实现方法

这两天做移动端项目遇到的问题,就是当滚动条下拉到一定的高度的时候,让某个东西固定定位到顶部首先做的如何监听滚动条的高度,下面是我写的方法 var _this =this window.addEventListener('scroll',function(){ var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if(scrollTop>100{//滚动条的高度,可以动态获取也可以写死 //
vue使用keep-alive保持滚动条位置的实现方法

前言下班前,20分钟,发一篇... 简单介绍,使用keep-alive的时候,返回前一页,没有保持滚动条位置. 事实上,就算不使用keep-alive,位置也没有被记录. 但是,在不适用keep-alive的时候,页面内容会刷新,所以就随他去了--就是这么任性-- 思路官方有推荐一个scrollBehavior,链接,但是上面标注,只在history.pushState的浏览器生效,不知道是不是只能开启history.pushState才可以使用,看了下实现,挺不友好的,还是自己搞一个吧..
asp.net通过Ajax UpdatePanel回传后滚动条位置变更解决方法

主要方法是: 用一个隐藏控件保存当前scorll值.回传回来后根据scroll的值在重新设置scroll. 1.首先用onscroll事件保存scorll值,并用HiddenField记录scroll值复制代码代码如下: <div id="lv_content" class="unify_content" style="padding-left: 0; height: 455px;" onscroll="SetScrollPo
Vue实现渲染数据后控制滚动条位置(推荐)

需求场景如下: 实现了消息发送,如果容器内消息过多,会出现滚动条,最新的消息位于最底部,不能及时出现在可视区域内,此时就需要在渲染列表后,将滚动条的位置定位到最底部.先来看看最终实现的效果实现思路渲染完数据后,通过refs对象获取消息容器的实际高度将滚动条的设置到最底部实现过程 sendMessage: function (event) { // 数据渲染 this.senderMessageList.push(thisSenderMessageObj); // 改变滚动条位置 this
vue 纯js监听滚动条到底部的实例讲解

在网页中,我们会遇到很多在滚动条到底部的时候有数据正在加载的事件,那么怎样用vue去实现这样的内容呢?本篇只给出一个雏形,结合vue的生命周期用纯javascript写的一个监听函数,后续操作数据库的部分暂且不议. 1.怎样用纯js判断滚动条是否到底部? 先了解几个关键词: (1)滚动条到顶部的位置:scrollTop (2)当前窗口内容可视区:windowHeight (3)滚动条内容的总高度:scrollHeight 触发监听的函数是: window.onscroll = function(
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll

前言前段时间有给大家分享一个vue桌面端弹框组件,今天再分享最近开发的一个vue pc端自定义滚动条组件. vscroll 一款基于vue2.x开发的网页端轻量级超小巧自定义美化滚动条组件.支持是否原生滚动条.鼠标移出是否自动隐藏.自定义滚动条尺寸及颜色等功能. 组件在设计开发之初借鉴了 el-scrollbar 及 vuebar 等组件设计思想. 通过简单的标签写法<v-scroll>...</v-scroll> 即可快速生成一个漂亮的替换原生滚动条. 参数配置 props:
vant list组件滚动保留滚动条位置

vant list组件滚动保留滚动条位置,需结合keepAlive使用,分享此篇,供大家参考. 1.保存位置的前提是用的keepAlive组件来做缓存,app.vue代码 <template> <div id="app"> <keep-alive> <router-view v-if='$route.meta.keepAlive'/> </keep-alive> <router-view v-if='!$route.me
vue navbar tabbar导航条根据位置移动实现定位、颜色过渡动画效果的代码

vant文档:Vant 2 - Mobile UI Components built on Vue 实现效果: 代码实现: 1.navbar.tabbar顶部导航过渡效果.颜色过渡: <div class="mallHead"> <van-nav-bar :title="titleName" fixed @click-left="onClickLeft" :style="style" safe-area-in
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件

按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是...在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊... 说说我的破解方法: 1.在每个需要用vue-router切换的组件的mounted钩子内将页面的位置自动回滚到页面顶部,解决滚动条位置自动记录问题: 2.在每个组件内定义一条变量scrollWatch默认为true,在绑定滚动监听事件时加个if判断,只有在scrollWatch
解决ASP.NET回传后div滚动条位置复位的问题(利用隐藏控件原理)

首先是为DIV添加一个onscroll="javascript:setScollTop()" 的方法(当然不一定是DIV其他的标签思路应该也是这样的) 复制代码代码如下: <div style="overflow: auto; height: 152px" align="left" id="dvScoll_1" onscroll="javascript:setScollTop()">www

vue使用keep-alive保持滚动条位置的实现方法

相关推荐

随机推荐