<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. Drop it FreeCodeCamp

    function drop(arr, func) { // Drop them elements. for(var start=0 ;start<arr.length; start++){ if ...

  2. python调用函数实现数据的增删改查(2)

    1  添加数据 def add(): # 输入姓名,年龄,电话 name=raw_input('name:') age=raw_input('age:') phone=raw_input('phone ...

  3. 路飞学城Python-Day79

    27-url控制器之path方法 由于基于re_path的路径编写方式是重复性高的编写url,如果规则改变了,则对应的要去修改很多url,这样是很不方便的 所以采用Django2.0的path去编写u ...

  4. 莫烦大大TensorFlow学习笔记(9)----可视化

      一.Matplotlib[结果可视化] #import os #os.environ['TF_CPP_MIN_LOG_LEVEL'] = '2' import tensorflow as tf i ...

  5. 使用kubeadm在CentOS上搭建Kubernetes1.14.3集群

    练习环境说明:参考1 参考2 主机名称 IP地址 部署软件 备注 M-kube12 192.168.10.12 master+etcd+docker+keepalived+haproxy master ...

  6. python 协程 greenlet gevent

    一.并发的本质 切换+保存状态 cpu正在运行一个任务,会在两种情况下切走去执行其他的任务(切换由操作系统强制控制),一种情况是该任务发生了阻塞,另外一种情况是该任务计算的时间过长时间片到了 二.协程 ...

  7. 在数据表中字段存有excel、word文件数据,让其随着记录指针移动而改变显示

    这是一个及其简单的问题,可是被绕住了.当记录移动时,装载数据到excel显示数据.这个方法写在哪里?如何触发? datasource.cds等空间的触发都是多次.到现在也没明白如何去做.笨方法: 1. ...

  8. css下背景渐变与底部固定的蓝天白云

    <?php defined('_JEXEC') or die; JHtml::_('behavior.framework', true); //if(!$templateparams->g ...

  9. jQuery(基础dom及css操作)

    设置元素内容 元素属性操作 ---------- 元素样式操作 ---------------- 对象数组的遍历 测试代码: $(function () { var v=$('div').css([' ...

  10. botot framework选择下拉框

    1,下拉框不能输入文字,如图: 方法: select from list    id=xxx   要选择的数据 2.下拉框可输入文字,如图: 方法: click element   di=xxx   ...