详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
作者：web_captian 发布时间：2024-05-08 09:34:39
标签：vue,router
按照正常的产品逻辑，我们在进行页面切换时滚动条应该是在页面顶部的，可是。。。在使用vue-router进行页面切换时，发现滚动条所处的位置被自动记录了下来，且在另一个组件内定义的滚动监听事件仍会运行，着实吃了一大惊。。。
说说我的破解方法：
1、在每个需要用vue-router切换的组件的mounted钩子内将页面的位置自动回滚到页面顶部，解决滚动条位置自动记录问题；
2、在每个组件内定义一条变量scrollWatch默认为true，在绑定滚动监听事件时加个if判断，只有在scrollWatch为true时进行监听函数，然后在组件destroyed的钩子内将变量scrollWatch设为false；这样就解决了滚动监听在别的组件内仍会运行的问题。
<script>
import $ from 'jquery';
export default {
data () {
return {
scrollWatch: true
}
},
mounted() {
$(window).scrollTop(0);
$(window).on('scroll', () => {
if (this.scrollWatch) {
//your code here
}
}
});
},
destroyed () {
this.scrollWatch = false;
}
}
</script>
来源：104.116.116.112.58.47.47.119.119.119.46.99.110.98.108.111.103.115.46.99.111.109.47.119.101.98.45.99.97.112.116.97.105.110.47.112.47.54.52.48.50.54.57.51.46.104.116.109.108.
0
投稿猜你喜欢
- 前言在python中, 切片是一个经常会使用到的语法, 不管是元组, 列表还是字符串, 一般语法就是:sequence[ilow:ihigh
- 本文实例讲述了Python装饰器用法。分享给大家供大家参考，具体如下：一、装饰器是什么python的装饰器本质上是一个Python函数，它可
之前使用email模块+smtplib模块发送邮件，虽然可以实现功能，但过程比较繁琐，今天发现一个宝藏库（yagmail），可以说是炒鸡好用- Python 语言与 Perl，C 和 Java 等语言有许多相似之处，也有一定的差异性，以下是Python语言获取文件后缀名和文件名的方法
- 目录什么是 JSON在哪里使用JSON基本的 JSON 语法如何在 Python 中处理 JSON 数据包含 JSON 模块使用 json.
- 算法简介鸡群算法，缩写为CSO(Chicken Swarm Optimization)，尽管具备所谓仿生学的背景，但实质上是粒子群算法的一个
- 在网上游荡，看着别人的精彩主页难免心里痒痒的，但自己精心布置的家（个人主页），如果在不同的浏览器中呈现
- 今天实习公司分配了一个数据处理的任务。在将列表中的字符串连接成一个长路径时，我遇到了如下问题：import ospath_list = [&
- 一般来说，造成MySQL出现中文乱码的因素主要有下列几点：1.server本身字符集设定的问题，例如还停留在latin12.table的语系
- 1. 引言星号* 往往被称为乘法运算符，是所有程序中最为常用的运算符号之一,在Python 中，星号还有很多隐藏的强大功能。本文将用最容易理
- 现有1.php内容如下： <?phpecho 'hi\nhi';在命令行中执行该文件： bash >> p
- 前言如果你在寻找python工作，那你的面试可能会涉及Python相关的问题。通过对网络资料的收集整理，本文列出了100道python的面试
- 前言本文旨在记录使用Flask框架过程中与前端Vue对接过程中，存在WebSocket总是连接失败导致前端取不到数据的问题。以及在使用Web
- 1. 用qt designer编写主窗体，窗体类型是MainWindow，空白窗口上一个按钮。并转换成mainWindow.py# -*-
- Vue服务器部署刷新页面404问题描述在上线vue开发的前端网页部署在服务器上后，刷新页面显示404原因因为网页上显示的是静态绝对路径而实际
- 数据采集XPath，XML路径语言的简称。XPath即为XML路径语言（XML Path Language），它是一种用来确定XML文档中某
- python3标准库里自带线程池ThreadPoolExecutor和进程池ProcessPoolExecutor。如果你用的是python
- 1 自动微分我们在《数值分析》课程中已经学过许多经典的数值微分方法。许多经典的数值微分算法非常快，因为它们只需要计算差商。然而，他们的主要缺
- 1：事件机制共享队列：利用消息机制在两个队列中，通过传递消息，实现可以控制的生产者消费者问题要求：readthread读时，writethr
- SQL Server数据库查询速度慢的原因有很多，常见的有以下几种：1、没有索引或者没有用到索引(这是查询慢最常见的问题，是程序设计的缺陷)
