首页 > 其他分享 >VUE-vue中切换页面时让目标页面的滚动条自动滚动到顶部的方法

VUE-vue中切换页面时让目标页面的滚动条自动滚动到顶部的方法

时间:2022-12-28 16:23:23浏览次数:53  
标签:vue 滚动 滚动条 window VUE 方法 页面

情景描述

  1. 页面 /a, 有输入框, 当输入框输入合适的值的时候, 不隐藏软键盘, 点击相应按钮直接跳到 /b
  2. 页面 /b, 页面本来内容很少, 没有滚动条的, 可是莫名的被下方的灰色区域顶到可视区上面, 内容被隐藏了一点, 但是手动拉回正常展示以后, 问题就不再重现

解决办法(针对单个页面这个问题的)

// 在/b页面, vue的mounted方法中, 写设置页面滚动条的这个方法
mounted() {
 // 切换页面时滚动条自动滚动到顶部
    window.scrollTo(0,0);
}

针对全部页面的话, 可以在路由的钩子函数中设置(main.js中)

// 这个方法我没有亲测, 是查网上资料的, 不过我觉得, 放在`router.beforeEach`更好
router.afterEach((to,from,next) => {
  window.scrollTo(0,0);
  // 或
  // window.scroll(0, 0);
});

  

 原文来源:https://blog.csdn.net/weixin_42283360/article/details/88032896 

标签:vue,滚动,滚动条,window,VUE,方法,页面
From: https://www.cnblogs.com/liuqingxia/p/17010379.html

相关文章

  • 滚动条大全(三)
    透明滚动框代码:<DIVstyle="BORDER-RIGHT:black0pxsolid;BORDER-TOP:black0pxsolid;SCROLLBAR-FACE-COLOR:#ffffff;SCROLLBAR-HIGHLIGHT-COLOR:#ffffff;O......
  • vue3使用vue-router构建SPA
    使用自动化构建工具vite搭建新项目#某个目录下执行npmcreatevite@latest 按照提示初始化项目,并按照提示:cdvite-projectnpminstallnpmrundev生成目录结构......
  • 基于图形化界面的方式创建vue2项目
    前提是安装vue-clinpmi-g@vue/cli接下来使用vueui创建vue项目vueui浏览器自动打开点击创建,然后去到你想把创建的项目放到的位置如果到不了那个位置,就......
  • vue嵌入iframe场景键盘事件不触发的问题
    使用鼠标移动事件触发函数<iframe**@mouseover="setFocus()"**id="iframeUE4"frameborder="0"src="路径地址"></iframe>再调用内......
  • Vue3源码阅读梳理
    简单代码例子const{createApp,defineComponent,computed,watch,ref,reactive,effect}=Vueconstapp=createApp({components:[],template:`<div......
  • Vue3+vant+ts 上滑加载,解决上滑调用多次数据的问题
    之前用vue2的时候,写过vue2的用法,链接在这里点击跳转哈,用得挺好的,也没啥问题,照葫芦画瓢的做出来了,但是有问题,下滑之后调用多次数据,按理说组件通过 loading 和 finished......
  • vue环境配置文件详解
    一.什么是配置文件1.在vue项目目录下,我们可以看到诸如package.json、.gitignore、package-lock.json等等能配置项目的结构、引用的库、运行的方式、版本控制等等的都称为......
  • vue首页缓存
    vue.config.js添加chainWebpack:config=>{        config.plugins.delete('prefetch');//取消预加载    config.plugins.delete('preload......
  • react和vue中为什么用key、并且用key的时候为什么不能用index
    为什么用key在虚拟dom进行diff算法的时候,使用key可以对key进行比较然后来判断两个节点是否是同一节点,极大的增加了速度。为什么避免使用index先来总结好了的:如果只是......
  • vue 使用路由component: () =>import (‘ ‘)报错解决办法
    今天帮朋友调代码的时候,在人家的mac上面,项目没有任何错误,到我这里就出现component:()=>import(’')加载路由错误。发现是import处报错,import属于异步引用组件,需要......