【vue】 vue2 监听滚动条滚动事件

news/2024/11/19 0:33:55/

代码

直接上代码,vue单文件
index.vue

<template><div class="content" @scroll="onScroll"><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p></div>
</template>
<script>export default {data() {return {num: 1,};},methods: {onScroll(event) {// 在这里处理滚动事件console.log("滚动" + `${(this.num += 1)}`, event);},},};
</script>
<style lang="scss" scoped>.content {height: 300px;border: 2px solid black;overflow: scroll;}
</style>

效果

在这里插入图片描述


http://www.ppmy.cn/news/1000064.html

相关文章

YAPI接口自动鉴权功能部署详解

目录 安装准备 在线安装 离线安装 配置使用 安装准备 以下操作&#xff0c;默认要求自己部署过yapi&#xff0c;最好是部署过yapi二次开发环境。 无论是选择在线安装或者是本地安装&#xff0c;都需要安装client工具。 1、yapi-cli&#xff1a;npm install yapi-cli –g…

系统架构设计师_备考第2天(计算机组成与体系结构)

文章目录 考频&#xff08;3分左右&#xff09;一、计算机结构二、CPU组成三、冯诺依曼结构和哈弗结构四、层次化存储结构五、Cache 考频&#xff08;3分左右&#xff09; 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 计算机结构&#xff08;★&#xff0…

数字图像处理-彩色图像处理

文章目录 一、彩色模型1.1RGB彩色模型1.2CMY和CMYK彩色模型1.3HSI彩色模型 二、伪彩色图像处理2.1灰度分层2.2灰度到彩色的变换 三、彩色图像的分割3.1RGB中的彩色图像分割3.2彩色边缘检测 一、彩色模型 1.1RGB彩色模型 RGB空间是生活中最常用的一个模型&#xff0c;电视机、…

企业即时通讯软件为何成为企业内部沟通的主流工具?

近年来&#xff0c;随着数字化程度不断提升&#xff0c;企业内部沟通方式也发生了诸多变化。传统的电子邮件已经逐渐被企业即时通讯软件代替&#xff0c;成为了企业内部沟通的主流工具。在这些软件中&#xff0c;J2L3x是其中独具特色的一个。本文将从以下几个方面来讲解企业即时…

超导电性的基本现象和相关理论

超导体 Hg 超导电性的基本现象和相关理论 超导体的基本特性 低温零电阻突变&#xff08;< 10^{-23 \Omega/m}&#xff09; 良导体在 10^{-10} \Omega/m临界温度迈斯纳效应 完全排磁通效应&#xff08;完全抗磁性&#xff09; 超导体物体内部不存在电场 第一类超导体与第二类…

React从入门到实战-react脚手架,消息订阅与发布

创建项目并启动 全局安装 npm install -g create-react-app切换到想创建项目的目录&#xff0c;使用命令&#xff1a;create-react-app 项目名称 ​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存中…(iQ6hEUgAABpQAAAD1CAYAAABeIRZoAAAAAXNSR0IArs4c6QAAIABJREFUe…

Prometheus服务器、Prometheus被监控端、Grafana、Prometheus服务器、Prometheus被监控端、Grafana

day03 day03Prometheus概述部署Prometheus服务器环境说明&#xff1a;配置时间安装Prometheus服务器添加被监控端部署通用的监控exporterGrafana概述部署Grafana展示node1的监控信息监控MySQL数据库配置MySQL配置mysql exporter配置mysql exporter配置prometheus监控mysql自动…

【JAVA】String ,StringBuffer 和 StringBuilder 三者有何联系?

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️初识JAVA】 文章目录 前言StringBufferStringBuffer方法 StringBuilderStringBuilder方法 String &#xff0c;StringBuffer 和 StringBuilder的区别String和StringBuffer互相转换 前言 在之前的文章…