vue 监听页面卷去的高度,获取元素离页面顶部的距离

1.首先在mounted生命周期上

mounted() {

    // 监听页面滚动事件

    window.addEventListener("scroll", this.handleScroll, true);

  },

2.也别忘了在离开页面前去掉监听

beforeDestroy() {

    window.removeEventListener("scroll", this.handleScroll, true);

  },

3.方法的使用methods

handleScroll(e) {

      let that = this;

      const winHeight =  e.target.scrollTop || document.documentElement.scrollTop;

      // console.log(winHeight);

      //在这里就可以写监听逻辑了

      

      下面是获取元素离页面顶部的距离的使用方法

      //组件

      //this.$refs.$el.tag.xxx.offsetTop(这是网上找到的,但是我实测不行),

        得换成this.$refs.xxx.$refs.yyy[0].offsetTop(xxx为子组件得ref,yyy为子组件里面的元素ref)

        

      //普通

      //this.$refs.xxx.offsetTop

    },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/142163.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

UCOS-III操作系统(操作系统、任务)

操作系统和实时操作系统 目录 操作系统和实时操作系统 什么是操作系统? 什么是实时操作系统? 任务 什么是任务? 什么是多任务? 什么是任务状态?(重要) 任务切换? 什么是操作…

Spring Cloud Alibaba Gateway全局token过滤、局部过滤访问时间超过50ms日志提示

文章目录 Spring Cloud Alibaba Gateway验证token在前篇的基础上加入依赖在filter包中创建tokenFilter Spring Cloud Alibaba Gateway局部过滤1.继承AbstractGatewayFilterFactory2.仿照AddRequestHeaderGatewayFilterFactory Spring Cloud Alibaba Gateway验证token 基础搭建…

基于C#的AE二次开发之IQueryFilter接口、ISpatialFilter接口、IQueryDef 接口的查询接口的介绍

一、开发环境 开发环境为ArcGIS Engine 10.2与Visual studio2010。在使用ArcEngine查询进行查询的时候主要使用三种查询接口IQueryFilter(属性查询) 、ISpatialFilter(空间查询) 、IQueryDef (多表查询) 那…

Cpp/Qt-day040920Qt

目录 时钟 头文件&#xff1a;Widget.h: 源文件:Widget.c: 效果图&#xff1a; 思维导图 时钟 头文件&#xff1a;Widget.h: #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QPaintEvent> #include <QPainter> #include <QTime>…

提升科研效率的关键:掌握3D科研绘图技能【文末送书】

提升科研效率的关键&#xff1a;掌握3D科研绘图技能 引言3D科研绘图的重要性和应用领域 3D科研绘图基础3D科研绘图的定义和重要性3D科研绘图的基本概念和技术 书籍简介书籍亮点核心内容内容简介作者简介 购买链接参与方式往期赠书回顾 引言 3D科研绘图的重要性和应用领域 3D科…

从C语言到C++:C++入门知识(1)

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关C语言的相关知识点&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入门到精通 数…

leetcode算法题-移动零Java

这道题的解法,我们可以新建一个等长的数组,初始化后数组中的元素都为零,我们只需要遍历一遍原来的数组,将不为0的数据转移到新数组即可,下面是代码实现: public static void main(String[] args) {System.out.println("移动零:" Arrays.toString(moveZero(new int[…

(1) ESP32获取图像,并通过电脑端服务器显示图像

目录 一、所需器件工具 二、客户端与服务器进行UDP通信 1、客户端代码 2、服务器端代码 3、效果展示 三、客户端拍照&#xff0c;通过UDP传输到服务器进行显示 1、客户端获取图像并UDP传输 2、电脑端服务器显示图像 3、效果展示 四、代码链接 一、所需器件工具 1.ESP3…

Vue watch实时计算器

watch实时计算器 可以自己选择、-、*、 参考代码 <!DOCTYPE html> <html> <head><meta charset"utf-8"><title></title><script src"https://cdn.bootcdn.net/ajax/libs/vue/2.7.10/vue.js"></script>…

CSI及CPHY的学习知识点

0.CSI早期只有DPHY可用 CSI-2 v1.3及之后版本提供了更高的接口带宽和更好的通道布局灵活性。从CSI-2 V1.3开始引入了C-PHY 1.0&#xff08;C-PHY 1.0是MIPI联盟于2014年9月发布的新物理接口)&#xff0c;能够兼容之前的D-PHY v1.2版本。 在CSI-2 V1.2及以前都只能用DPHY传输csi…

webp格式及其转成

"WebP" 是一种现代的图像压缩格式&#xff0c;由谷歌公司开发。它旨在提供高质量的图像压缩&#xff0c;同时减小图像文件的大小&#xff0c;从而加快网络加载速度。WebP 格式通常使用 ".webp" 扩展名来标识。 WebP 图像格式主要有以下几个特点和优点&…

HTMl案例二:注册页面

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>综合案例-注册页面</title> </head><…

Mysql高级——数据库设计规范(2)

8. ER模型 ER 模型中有三个要素&#xff0c;分别是实体、属性和关系。 实体&#xff0c;可以看做是数据对象&#xff0c;往往对应于现实生活中的真实存在的个体。在 ER 模型中&#xff0c;用矩形来表示。实体分为两类&#xff0c;分别是强实体和弱实体。强实体是指不依赖于其…

汽车电子——产品标准规范汇总和梳理(自动驾驶)

文章目录 前言 一、分级 二、定位 三、地图 四、座舱 五、远程 六、信息数据 七、场景 八、智慧城市 九、方法论 总结 前言 见《汽车电子——产品标准规范汇总和梳理》 一、分级 《GB/T 40429-2021 汽车驾驶自动化分级》 《QC/T XXXXX—XXXX 智能网联汽车 自动驾…

组合数4 高精度计算组合数

一般来说需要高精乘和高精除&#xff0c;但化简为质因子形式后只用高精乘。 一个阶乘n中因子p的个数&#xff1a; #include<bits/stdc.h> #define IOS ios::sync_with_stdio(0);cin.tie(0);cout.tie(0); #define endl \nusing namespace std;typedef pair<int, int&…

如何办一份有价值的企业内刊/报纸?向《华为人》学习就够了

前两天有一个朋友联系华研荟&#xff0c;说他是今年大学毕业加入了一个中型公司&#xff0c;他学的是企业管理&#xff0c;在公司人力资源部门工作。上周老板说公司要办一份自己的内刊&#xff0c;这个工作由人力资源部负责&#xff0c;而人力资源经理就把这个活交给她了。 她…

数据结构--堆排序

目录 堆的定义 建立初始化堆的步骤 建立大根堆的代码 大根堆排序的代码 算法效率分析 稳定性 堆的定义 回忆 基于选择排序的特性&#xff1a;选取关键字最小&#xff08;或者最大&#xff09;的元素放入到序列里面&#xff0c;知道了大堆和小堆概念&#xff0c;所以将…

“淘宝” 开放平台接口设计思路(内附API接口免费接入地址)

最近对接的开放平台有点多&#xff0c;像淘宝、天猫、京东、拼多多、快手、抖音等电商平台的开放平台基本对接了个遍&#xff0c;什么是CRUD BODY也许就是这样的吧&#xff01;&#xff01;&#xff01; 经过这几天的整理&#xff0c;脑子里大概有了个开放平台接口的设计套路&…

基于PYQT5的GUI开发系列教程【二】框架安装和基础环境配置

本文概述 PYQT5是一个基于python的可视化GUI开发框架&#xff0c;具有容易上手&#xff0c;界面美观&#xff0c;多平台部署等优点&#xff0c;作者将通过一系列教程&#xff0c;带领大家从零基础到入门~能够自主实现GUI开发。 作者介绍 作者本人是一名人工智能炼丹师&#xff…

从0开始写中国象棋-创建棋盘与棋子

从控制台版本开始 考虑到象棋程序&#xff0c;其实就是数据结构与算法实现。 所以和界面相关的QT部分我们先放一放。 我们从控制台版本开始。这样大家更容易接受&#xff0c;也不影响开发。 后面我们会把控制台嫁接到QT上完成完整的游戏&#xff0c;那时候自然就水到渠成了…