<script>
export default {
data(){
return{
i = 0
}
},
mounted () {
window.addEventListener('scroll', this.handleScroll, true);
// 监听(绑定)滚轮 滚动事件
},
methods:{
handleScroll(){
// 页面滚动距顶部距离
var scrollTop = window.pageYOffset || document.documentElement.scrollTop ||
document.body.scrollTop
var scroll = scrollTop - this.i;
this.i = scrollTop;
if(scroll<0){
console.log('up')
}else{
console.log('down')
}
},
}

vue 中判断向上滚动还是向下滚动的更多相关文章

  1. JS判断鼠标向上滚动还是向下滚动

    js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...

  2. js-scroll判断页面是向上滚动还是向下滚动

    原理:那当前的scrollTop和之前的scrollTop对比 如果变大了,表示向下滚动(scrollTop值变大): 如果变小了,表示向上滚动(scrollTop值变小). 方法一:js代码: $( ...

  3. vue中判断页面滚动开始和结束

    参考链接:https://www.jianshu.com/p/adad39705ced    和  https://blog.csdn.net/weixin_44309374/article/deta ...

  4. 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]

    /**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...

  5. C++中的向上类型转换和向下类型转换

    在c++的世界中有这样两个概念,向上类型转换,向下类型转换,分别描述的是子类向基类,和基类向子类的强制类型转换. 向上强制类型转换 切割:覆盖方法和子类数据丢失的现象生成切割(slice) class ...

  6. Java中的向上转型和向下转型

    首先要明白一点向上转型和向下转型他们都是建立在继承的基础上. 一.向上转型 子类到父类的转换通常称作向上转型,通俗的说就是定义父类对象指向子类对象. 下面通过一个例子来深入理解向上转型. //定义一个 ...

  7. 3.sql中的向上递归和向下递归

    1.向下递归 select * from table_name where 条件 connect by prior bmbm(本级关联条件)=sjbmbm(上级关联条件) start with bmb ...

  8. jq判断鼠标滚轴向上滚动还是向下滚动

    $(document).on("mousewheel DOMMouseScroll", function (e) { var delta = (e.originalEvent.wh ...

  9. Java中的向上造型和向下造型等

    package com.study.oop.day01; /**  * 如果某个方法是静态 的,它的行为就不具有多态性  * @author LuHongGang  * @date 2017年6月5日 ...

随机推荐

  1. gazebo 7.0 升级到7.15 参考他人博客

    gazebo 7.0 升级到7.14 网址:https://blog.csdn.net/riancy_riancy/article/details/84568322 编译后遇到报错 ,解决问题的网址: ...

  2. 洛谷P1993 小K的农场_差分约束_dfs跑SPFA

    Code: #include<cstdio> #include<queue> using namespace std; const int N=10000+233; const ...

  3. Xpath--使用Xpath爬取糗事百科成人版图片

    #!usr/bin/env python#-*- coding:utf-8 _*-"""@author:Hurrican@file: 爬取糗事百科.py@time: 20 ...

  4. IOS - Display a base64 image within a UIImageView: 显示一个base64的图片

    base64字符串(base64String)-存的是image数据NSData* data = [[NSData alloc] initWithBase64EncodedString:base64S ...

  5. css+div 绘制多边形

    /*1.正方形*/ <div id="square"></div> #square { width: 100px; height: 100px; backg ...

  6. 使用Flask_SQLAlchemy连接多个数据库

    #!/usr/bin/env python #-*- coding: utf-8 -*- from flask import Flask from flask_sqlalchemy import SQ ...

  7. MNIST机器学习数据集

    介绍 在学习机器学习的时候,首当其冲的就是准备一份通用的数据集,方便与其他的算法进行比较.在这里,我写了一个用于加载MNIST数据集的方法,并将其进行封装,主要用于将MNIST数据集转换成numpy. ...

  8. jQuery选择器练习中,带空格和不带空格的问题

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. Strtus配置Tomcat出现问题

    在使用 eclipse 过程中,如果你加入了某些自定义的框架(比如 struts)后,在启动 services 后, 控制台出现一片红色的字样,表明有问题.这时仔细查看 eclipse 控制台信息, ...

  10. UI组件之AdapterView及其子类(三)Spinner控件具体解释

    Spinner提供了从一个数据集合中高速选择一项值的办法. 默认情况下Spinner显示的是当前选择的值.点击Spinner会弹出一个包括全部可选值的dropdown菜单或者一个dialog对话框,从 ...