插件名称 | 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('路标会最高!')
}
}
}
}
官网:https://github.com/scaccogatto/vue-waypoint
演示:https://www.vue365.cn/code_demo.php?id=1882
GitHub下载:https://github.com/scaccogatto/vue-waypoint/archive/master.zip