1.安装依赖：

npm install vue-waypoint --save-dev

2.使用：

在main.js中：

import Vue from 'vue'
import VueWaypoint from 'vue-waypoint'// Waypoint plugin
Vue.use(VueWaypoint)

在demo.vue组件中：

html：

    <divclass="waypoint"v-waypoint="{ active: true, callback: onWaypoint, options: intersectionOptions }"><p v-for="v in 20" :key="v">qwertyuiop---{{v}}</p></div>

js:

data中的参数配置： intersectionOptions: {root: document.querySelector("#app"), //用作视口的元素，用于检查目标的可见性。必须是目标的祖先。如果未指定，则默认为浏览器视口nullrootMargin: "0px",threshold: 0.33 //范围为 0-1: 阈值为1.0意味着当100％的目标在root选项指定的元素中可见时，将调用回调}

intersectionOptions配置参考：https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

methods中滚动触发的回调方法：onWaypoint({ el, going, direction, _entry }) {// going: in, out// direction: top, right, bottom, leftif (going === this.$waypointMap.GOING_IN) {console.log("waypoint going in!"); //激活-出现了}if (going === this.$waypointMap.GOING_OUT) {console.log("waypoint going out!");}if (direction === this.$waypointMap.DIRECTION_TOP) {console.log("waypoint going top!");}if (direction === this.$waypointMap.DIRECTION_BOTTOM) {console.log("waypoint going bottom!");}}

css:

.waypoint {height: 500px;background: #420983;
}
.waypoint p {background: #42b983;margin: 3px;
}

3.介绍：

1.当向上滚动到出现33%的时候，触发回调函数的top

2.当继续向上滚动到出现剩余的33%的时候，再次触发回调函数的top

3.当向下滚动到出现33%的时候，触发回调函数的bottom

4.当继续向下滚动到出现剩余的33%的时候，触发回调函数的bottom

参考资料：https://github.com/scaccogatto/vue-waypoint

vue滚动监听插件 vue-waypoint相关推荐

Bootstrap3 滚动监听插件的事件
滚动监听插件的事件 Bootstrap为滚动监听插件提供了一个事件 activate.bs.scrollspy,每当一个新的导航项目被激活时,就会触发该事件,并自动为导航条的相应菜单项添加了一个 .a ...
Bootstrap3 滚动监听插件的方法
滚动监听插件的方法通过 JavaScript 调用滚动监控插件时,如果监听对象的DOM节点有增删元素的操作,则需要调用 .scrollspy('refresh') 方法来更新DOM. <scr ...
Bootstrap3 滚动监听插件的选项
滚动监听插件的选项 Bootstrap为滚动监听插件提供了一个选项 offset,用来调整滚动位置距顶部偏移的像素值,取值为数字,默认值为10.正值表示滚动条向上偏移,负值表示向下偏移. offset ...
Bootstrap3 滚动监听插件的调用方式
滚动监听插件的调用方式无论何种实现方式,滚动监听都需要被监听的组件是position: relative;即相对定位方式.大多数时候是监听<body>元素. 1.data属性调用只需给 ...
Bootstrap 滚动监听插件Scrollspy 的事件
事件 Bootstrap滚动监听插件Scrollspy提供了一个事件 activate,每当一个新的导航项目被激活时,就会触发该事件,并自动为导航条的相应菜单项添加了一个 .active 类,让它高亮 ...
Bootstrap 滚动监听插件Scrollspy 的选项
选项 Bootstrap滚动监听插件Scrollspy提供了一个选项 offset,用来调整滚动位置距顶部偏移的像素值,取值为数字,默认值为10.正值表示滚动条向上偏移,负值表示向下偏移. 所有的选项 ...
Bootstrap 滚动监听插件Scrollspy 的方法
方法通过 JavaScript 调用滚动监控插件时,如果监听对象的DOM节点有增删元素的操作,则需要调用 .scrollspy('refresh') 方法来更新DOM. <script> ...
jQuery滚动监听插件Waypoints
你是否希望当用户仅仅滚动滑条的时候,就能触发各种各样的动态效果呢?比如图片浮现.文字漂移等各种各样的动画!那么我就推荐你一款用于捕获各种滚动事件的插件-Waypoints.同时Waypoints还支持 ...
scrollspy 滚动监听插件
<style>/*第一步*/body {position: relative;}#navbar{background:#aab;position:fixed;left:100px;top: ...

vue滚动监听插件 vue-waypoint