首页 > 其他分享 >vue 一个页面切到另一个页面,再切回来的时候,滚动条的位置不变(只处理当前页面)

vue 一个页面切到另一个页面,再切回来的时候,滚动条的位置不变(只处理当前页面)

时间:2024-01-26 14:25:28浏览次数:24  
标签:再切 切到 next 滚动条 scrollTop beforeRouteLeave 页面

1、使用 beforeRouteLeave 来记录路由跳转之前滚动条的位置

beforeRouteLeave(to, from, next): 离开路由之前执行的函数,可用于页面的反向传值,页面跳转;
beforeRouteLeave(to, from, next) { console.log('beforeRouteLeave.................') this.scroll = document.getElementsByClassName('el-main')[1].scrollTop //查找自己页面的滚动条 next() //一定不可漏写 },

2、在 activated 中将 beforeRouteLeave 中记录的位置赋值给引起滚动条滚动元素的 scrollTop

 

activated() {
  document.getElementsByClassName('el-main')[1].scrollTop = this.scroll
},

 

标签:再切,切到,next,滚动条,scrollTop,beforeRouteLeave,页面
From: https://www.cnblogs.com/wongzzh/p/17989210

相关文章

  • js根据地区判断进行跳转页面
    <script>//获取访问者的IP地址functiongetVisitorIP(){returnnewPromise((resolve,reject)=>{constxhr=newXMLHttpRequest();xhr.open('GET','https://ipinfo.io/json',true);xhr.onload=func......
  • vue实现将word转换为HTML页面,并实现类似word的目录导航和关键字搜索跳转
    <template>  <divclass="content">    <divclass="header">      <divclass="title">        XXXXXX      </div>      <divclass="search">   ......
  • vue print.js 打印 此处打印不包含页面的页码 (打印方法二)
    <template><divclass="modalContainerprintAsset"ref="modalContainer"><divv-for="(items,index)intableDataPrint":key=indexstyle="page-break-after:always;zoom:1"ref="show......
  • Uni-app页面路由的五种写法
    uni.navigateTo(OBJECT)uni.redirectTo(OBJECT)uni.reLaunch(OBJECT)uni.switchTab(OBJECT)uni.navigateBack(OBJECT) 概要代码展示在最后,可以在应用中感受这几种不同方法的不同页面路由的方式有很多,在项目中遇到不同的跳转需求,就需要使用不同的跳转方法,下面介绍一下不......
  • iOS 多级页面之间的代理方法使用
    当然可以。为了提供一个更详细的示例,我将为每个页面(Page1ViewController、Page2ViewController、Page3ViewController和Page4ViewController)编写示例代码,以展示如何通过代理模式将数据从Page4传递回Page1。定义Page4的代理协议首先,定义一个在Page4ViewController中使用的......
  • 前端性能测试 - 页面运行性能测试场景拓展
    前言对于前端场景复杂且需保持常态开启的页面(例如在线表格、高频大屏),客户在实际应用场景中长时间使用会很容易出现性能问题。但是在测试场景下,并不是那么容易观察到,为了更好的评估和描述出现的问题,当前主要对页面性能场景作以下分类:下载页面性能表现运行时性能表现这篇文章主要跟大......
  • 使用rpa打开浏览器并执行js抓取页面元素详情步骤
    这里我们专门开一个文章来写如何在rpa中执行js获取页面元素。个人觉得,复杂点的需求用js会方便很多,所以后续的文章我都会重点使用js去获取页面元素。好,正文开始,我们先看一下rpa为我们提供的自带的方便的抓取元素的方式,我们还是以小红书为例,还是以上一个例子为例,上个例子我们使......
  • 页面布局
    页面布局1.弹性盒子布局配套属性:flex-direction:作用对象:弹性盒子设置弹性盒子内子元素的排列方向其中有:row(横向,默认)column(竖着)row-reverse(反向横着)column-reverse(反向竖着)flex-wrap:作用对象:弹性盒子设置弹性盒子内的子元素是否换行,其中有:nowrap(不换行,默认)w......
  • 使用递归解决嵌套页面的状态改变
    场景一个注销页,里面有四种状态。注销说明页输入手机号码和图形验证码输入短信验证码注销处理中在每一个状态中,都需要被APP调用window.jumpOther()返回到上一个状态<template><divv-if="pageStatus.isDelete"></div><divv-if="pageStatus.isInputPhone"></div......
  • 使用 FreeMarker 生成静态页面
    在项目开发中,对于一些访问量较大的页面,可以提前基于数据生成静态页面,当数据有变化时再重新生成并更新静态页面,这样可以减轻数据库压力,提高网站的并发访问效率。常用的技术就是使用FreeMarker模板引擎,它是一款高性能的,基于模板和数据,生成输出文本的通用工具。本篇博客基于FreeM......