vue滚动监听插件 vue-waypoint

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：

    <div
      class="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"), //用作视口的元素，用于检查目标的可见性。必须是目标的祖先。如果未指定，则默认为浏览器视口null
        rootMargin: "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, left
      if (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