滚动到元素时触发功能– VueWaypoint

滚动到元素时触发功能– VueWaypoint
插件名称 VueWaypoint
发布时间 2020年8月25日
插件作者 scaccogatto

一个简单的Vue.js方向,可在您滚动到特定元素时跟踪滚动事件和触发功能。

安装和下载:

# Yarn
$ yarn add vue-waypoint

# NPM
$ npm i vue-waypoint --save

基本用法:

1.在Vue之后导入VueWaypoint。

import Vue from 'vue'
import VueWaypoint from 'vue-waypoint'

2.注册插件。

Vue.use(VueWaypoint)

3.基本用法:

<template>
  <div v-waypoint="{ active: true, callback: onWaypoint, options: intersectionOptions }"></div>
</template>
export default {
  data: () => ({
    intersectionOptions: {
      root: null,
      rootMargin: '0px 0px 0px 0px',
      threshold: [0, 1] 
    } 
  })
  methods: {
    onWaypoint ({ going, direction }) {
      // going: in, out
      // direction: top, right, bottom, left
      if (going === this.$waypointMap.GOING_IN) {
        console.log('路标的!')
      }
      if (direction === this.$waypointMap.DIRECTION_TOP) {
        console.log('路标会最高!')
      }
    }
  }
}