使用vue.js在页面内组件监听scroll事件的方法

思路：scroll在哪儿个组件内，就在获取那个dom元素。网上好多思路是

window.addEventListener("scroll", function(){
  console.log('scrolling');
  });

这是监听不到的！如果你整个网页可以滑动，或许还可以试试！

对于像我这样，只在页面的内的一个div内要监听的。

实现代码如下：

第一步：滑动的组件外层的div加 ref="viewBox" 为了通过$refs获取dom元素

<!--设备列表-->
<div class="deviceWrapper" ref="viewBox">
 <mu-refresh-control :refreshing="refreshing" :trigger="trigger" @refresh="refresh"/>
 <div class="demo-grid">
 <!--设备列表 手机一行两列 pad一行4列-->
 <mu-row>
  <mu-col v-for="device in devicesList" width="50" tablet="25" desktop="25">
  <deviceCardView :device-data="device""></devicelightCardView>
  </mu-col>
 </mu-row>
 </div>
 <p class="bottomLine" v-bind:class="{bottomLineVisible:isScroll}">---------------------我是有底线的---------------------</p>
</div>

第二步：

mounted() {
// 通过$refs获取dom元素
 this.box = this.$refs.viewBox
 // 监听这个dom的scroll事件
 this.box.addEventListener('scroll', () => {
 console.log(" scroll " + this.$refs.viewBox.scrollTop)
 //以下是我自己的需求，向下滚动的时候显示“我是有底线的（类似支付宝）”
 this.isScroll=this.$refs.viewBox.scrollTop>0
 }, false)
}

ps：具体怎么做，看需求了。只要能打印出来.scrollTop就行了

以上这篇使用vue.js在页面内组件监听scroll事件的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue.js实战之通过监听滚动事件实现动态锚点

    Vue.js实战之通过监听滚动事件实现动态锚点

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

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

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

  • 详解使用vue-router进行页面切换时滚动条位置与滚动监听事件

    按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是...在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊... 说说我的破解方法: 1.在每个需要用vue-router切换的组件的mounted钩子内将页面的位置自动回滚到页面顶部,解决滚动条位置自动记录问题: 2.在每个组件内定义一条变量scrollWatch默认为true,在绑定滚动监听事件时加个if判断,只有在scrollWatch

  • 在Vue组件中获取全局的点击事件方法

    使用场景: 在Vue组件中点击某元素之外的地方移除该元素 需求: 如上图所示,"用户列表"页面有三个Vue组件组成,分别是"菜单组件","导航组件"和"列表组件".其中"列表组件"中包含一个"下拉菜单",当我们点击"下拉菜单"以外的区域隐藏下拉菜单. 解决方法一: 出现"下拉菜单"的同时,建一个透明的遮罩层,然后只有"下拉菜单"

  • 使用vue.js在页面内组件监听scroll事件的方法

    思路:scroll在哪儿个组件内,就在获取那个dom元素.网上好多思路是 window.addEventListener("scroll", function(){ console.log('scrolling'); }); 这是监听不到的!如果你整个网页可以滑动,或许还可以试试! 对于像我这样,只在页面的内的一个div内要监听的. 实现代码如下: 第一步:滑动的组件外层的div加 ref="viewBox" 为了通过$refs获取dom元素 <!--设备列表

  • vue监听滚动事件的方法

    vue中监听滚动事件,然后对其进行事件处理,一般有:1. 滚动到顶部吸附: 2. 根据滚动的位置激活对应的tab键(锚链接tab键) 这两种方式的处理都是可通过监听scroll来实现 mounted(){ window.addEventListener('scroll',this.handleScroll) // 监听滚动事件,然后用handleScroll这个方法进行相应的处理 } 处理方法 1. 滚动到顶部吸附 html元素 <!--如果isFixed为true的话,就添加class is_

  • Android ListView监听滑动事件的方法(详解)

    ListView的主要有两种滑动事件监听方法,OnTouchListener和OnScrollListener 1.OnTouchListener OnTouchListener方法来自View中的监听事件,可以在监听三个Action事件发生时通过MotionEvent的getX()方法或getY()方法获取到当前触摸的坐标值,来对用户的滑动方向进行判断,并可在不同的Action状态中做出相应的处理 mListView.setOnTouchListener(new View.OnTouchLis

  • 基于vue监听滚动事件实现锚点链接平滑滚动的方法

    基于vue监听滚动事件实现锚点链接平滑滚动的方法

    基于vue监听滚动事件,实现锚点链接平滑滚动 近日在做一个vue项目的餐饮模块,小编需要实现一个菜单列表显示的功能(如图所示:左边为菜单类别,右边显示相对应的菜品) 小编将此分为三个功能模块来实现(本来一张动画就清晰明了,小编太笨,只得口述一下): 1.左边点击类别,右边显示相应类别的菜品列表(平滑滚动) 2.滚动右边的滚动条,左边对应的显示当前样式 3.若从别的页面点击菜品进来该页面,则该菜品为指定效果 小编也是vue的初学者,在阅读了大量的文章后,其中借鉴http://www.jb51.ne

  • 两种js监听滚轮事件的实现方法

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

  • vue.js项目 el-input 组件 监听回车键实现搜索功能示例

    基于element-ui 组件 开发的vue.js项目, 实现回车键发起搜索,和原生的input 标签使用方法不一样: el-input 监听键盘按下状态 得用@keyup.enter.native,如果是非el-input 组件,可以直接用@keyup.enter <el-input placeholder="搜索" icon="search" v-model="input" :on-icon-click="pchandleIc

  • vue.js学习之UI组件开发教程

    vue.js学习之UI组件开发教程

    本文主要给大家介绍了关于vue.js之UI组件开发的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 1. 新建组件: <script src="/public/javascripts/vue.js"></script> <style> #app1{background-color: red} #app2{background-color: blue} </style> <body> <div id=&quo

  • Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无限滚动加载不需要写首次载入列表的函数, 代码如下: html: //父组件 <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance=

  • vue父组件监听子组件数据更新方式(hook)

    vue父组件监听子组件数据更新方式(hook)

    目录 vue父组件监听子组件数据更新 this.$on(‘hook : 生命周期钩子’, () => {}) @hook:生命周期钩子=“触发的函数” 监听子组件内数据变化,父组件绑定change事件 子组件 父组件 大功告成 vue父组件监听子组件数据更新 this.$on(‘hook : 生命周期钩子’, () => {}) 可以监听执行生命周期钩子,适用场合如: data(){     return {         itemID:'',     } } mounted(){     

随机推荐