一、
this.$nextTick(function () {

     
      window.addEventListener('scroll', this.onScroll, true)  
     
    })
在使用监听事件的时候要把其中的监听设置为true否则监听不生效;
其次最好把其放置在created中;
二、

onScroll(){  
      let scrollTop = document.getElementById('changeTil').scrollTop;
      if (scrollTop > 490) {
        this.auto_fixed.fixed = true
      }else{
        this.auto_fixed.fixed = false
      }
    },
1、获取滑动距离的时候确定好具体元素的位置;

 let scrollTop= document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset直接使用这个不生效;

VUE项目中检测网页滑动注意事项的更多相关文章

  1. vue项目中遇到的一些问题

    或访问:https://github.com/littleHiuman/experiences-about-vue  欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...

  2. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  3. 去除vue项目中的#及其ie9兼容性

    一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ m ...

  4. 在vue项目中使用canvas-nest.js,报parameter 1 is not of type 'Element'

    canvas-nest.js是一款轻量的网页特效,如图: github地址:https://github.com/hustcc/canvas-nest.js 在普通的html项目中,只要将<sc ...

  5. 解决在Vue项目中时常因为代码缩进导致页面报错的问题

    前言 如果我们初次使用vue-cli来构建单页SPA应用,在撸代码的过程中有可能会遇到这种因为代码缩进导致 页面报错的问题,导致我们烦不胜烦.接下来我们就来看一看如何解决这个小问题... erro原因 ...

  6. 实战:vue项目中导入swiper插件

    版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4.常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: n ...

  7. 如何在Vue项目中给路由跳转加上进度条

    1.前言 在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示).虽然实际用处不大,但是对用户来说,有个进度条会大大 ...

  8. vue项目中使用bpmn-流程图预览篇

    前情提要 上文已经实现了节点操作的前进.后退.导入.导出等操作,今日来实现“流程图预览”,以及视图的放大缩小 前提:项目安装过bpmn,安装可见上篇文章 实现要点 bpmn提供了两个神器:Modele ...

  9. vue项目中使用bpmn-节点篇

    前情提要 根据之前的操作,我们可以创建.导入.导出流程图,并对其进预览.通过此篇可以学到: 为节点添加点击.鼠标悬浮等事件 获取流程图内所有指定类型的节点 通过外部更新节点名字 获取节点实例的两种方法 ...

  10. vue项目中使用bpmn-为节点添加颜色

    内容概述 本系列 “vue项目中使用bpmn-xxxx” 分为五篇,均为自己使用过程中用到的实例,手工原创,目前属于陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意 ...

随机推荐

  1. charles小程序抓包

    参考链接:https://www.jianshu.com/p/048b67c5ed00 1. 手机上的程序目前按app的抓包方式,配置代 理,下载证书,打开设备---微信---本地网络,就可以直接抓包 ...

  2. 面试官:MySQL一千万数据,怎么快速查询?

    前言 面试官:来说说,一千万的数据,你是怎么查询的? me:直接分页查询,使用limit分页. 面试官:有实操过吗? me:肯定有呀 此刻献上一首<凉凉> 也许有些人没遇过上千万数据量的表 ...

  3. /usr/bin/install: cannot create regular file `/usr/local/jpeg6/include/jconfig.h'

    出现下列异常: /usr/bin/install -c -m 644 jconfig.h /usr/local/jpeg6/include/jconfig.h /usr/bin/install: ca ...

  4. error NU1301: Failed to retrieve information about 'volo.abp.cli' from remote source 'https://www.myget.org/feed/Packages/aspnetcoremodules/FindPackagesById()?id='volo.abp.cli'&semVerLevel=2.0.0'.

    today i come across an error when install the abp from the command line after refer to https://githu ...

  5. H5 判断当前浏览器环境是 微信还是支付宝

    let ua = window.navigator.userAgent.toLowerCase(); //判断是不是微信 if (ua.match(/MicroMessenger/i) == &quo ...

  6. js 时间 日期

    date.getYear(); // 获取当前年份(2 位) date.getFullYear(); // 获取完整的年份(4 位, 1970-????) date.getMonth(); // 获取 ...

  7. vue项目的两种构建工具Vue CLI和Vite

    Vue CLI官方项目搭建工具,使用的打包器是webpack,webpack使用的模块化规范是commonjs模块: Vite主要特点是开发环境启动迅速,因为是使用的ES模块,这是在现代浏览器开始原生 ...

  8. Unity 使用JIMO 做MR扫图(Vuforia) 优化

    最近在做一个用MR眼镜端扫描图片做定位用, 使用的Vuforia提供的图片识别功能. 在眼镜端因为摄像机很挫,导致扫描出来的图片 位置存在着一定的偏差.就做了个小优化. 1.扫图的角度设定,垂直于图片 ...

  9. 装机DEBUG大全

    显示器 分屏没声音?去声音设置 (前提是HDMI连接 分屏能够传输音频 再去调整应用的音频

  10. ZSTUOJ平台刷题⑤:Problem G.--深入浅出学算法023-旋转数阵

    Problem G: 深入浅出学算法023-旋转数阵 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 4794  Solved: 955 Descripti ...