vue监听滚轮事件

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<style type="text/css">
#box {
width: 100%;
height: 2000px;
}
</style>

</head>
<div id="box"></div>

<body>
<!-- vue监听滚动事件 -->

<script type="text/javascript">

var vm = new Vue(

{

el:‘#box‘,

data() {
return {
scroll: ‘‘
}
},

methods: {

menu() {
this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
console.log(this.scroll)
}
},

mounted() {
window.addEventListener(‘scroll‘, this.menu)
},
})

</script>

</body>

</html>

原文地址:https://www.cnblogs.com/gyw1996/p/11112470.html

时间: 2024-10-29 19:09:01

vue监听滚轮事件的相关文章

vue监听滚动事件,实现滚动监听

在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg

两种js监听滚轮事件的方式

前段时间在写前端的时候,需要监听浏览器的滚轮事件 网上查了一下,找到两种监听滚轮事件的方法: 一.原生js通过window.onscroll监听 //监听并注册匿名函数window.onscroll = function() { //为了保证兼容性,这里取两个值,哪个有值取哪一个 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //scrollTop就是触发滚轮事件时滚轮的高度 } 二.

vue监听滚动事件,实现滚动监听(scroll滚动)

在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <script type="text/javascript" src="

vue监听滚动事件 实现动态锚点

前几天做项目的时候,需要实现一个动态锚点的效果 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑滚动? 2. 如何监听页面滚动事件? 在浏览了大量文章.进行多次尝试之后,终于解决了这些问题 期间主要涉及到了 setTimeout 的递归用法,和 Vue 生命周期中的 mounted 一.锚点实现 在实现平滑滚动之前,得先确保基本的锚点功能 如果没有其他要求,直接用 <a href="#i

vue监听滚动事件 实现某元素吸顶或者固定位置显示

https://blog.csdn.net/wang1006008051/article/details/78003974 1.监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首先,在mounted钩子中给window添加一个滚动滚动监听事件, mounted () { window.addEventListener('scroll', this.handleScroll) }, 然后在方法中,添加这个handleScroll方法 handleScroll () { var

vue监听滑动事件,隐藏移动端键盘或者input失去焦点

在页面加载的地方mounted或者created写监听事件,注意使用touchmove事件 window.addEventListener("touchmove",this.myTouchMove) // 监听滑动事件 // 滑动关闭键盘 myTouchMove: function (evt) { if(document.hasFocus){ const inputId = document.getElementById('myBox') // 获取ID inputId.blur()

vue 监听 input 回车事件

<el-input size="small" placeholder="搜索..." v-model="searchParam.quick_query" @keyup.13="enter"> 这样监听回车事件没有效果,input的原生事件被vue隐藏了,如果要调用原生事件,需要在事件后添加`.native`修饰符.如下: <el-input size="small" placeholder

vue监听事件 v-on

代码:问题:如何将button和counter关联起来,通过点击button按钮,递增counter的数值. 可以通过 v-on 指令来完成此关联. v-bind是在模板中绑定一些东西,从而将数据传入模板中.v-on的功能则是相反的,这里的绑定更加确切的说是监听,它可以接受一些来自模板的东西,例如事件,v-on同样需要参数,它的参数是事件的名称,这个事件就是我们要监听并使用的,例如我们可以在这里监听click事件,不仅仅是click还可以监听任何由此按钮产生的DOM事件,例如mouseenter

Qt实现小功能之列表无限加载(创意很不错:监听滚动条事件,到底部的时候再new QListWidgetItem)

概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用鼠标滚轮的时候,页面会自动加载剩余的内容.如下: 简约而不简单,正是这种别出心裁,突破常规的设计才能得到用户的青睐…… 实现思路 在前端开发可以使用一些jQuery插件实现这种效果,后台只需要准备好数据就行了.在Qt中如何给列表组件(QListWidget,QTreeWidget, QTableWi