插件名称 | vue-scrollama |
---|---|
版本号 | v1.2.0 |
发布时间 | 2020年6月22日 |
插件作者 | shenoy |
一个Vue组件,可轻松设置滚动驱动的交互(又称滚动讲演)。 在引擎盖下使用 Scrollama。
# NPM
$ npm install vue-scrollama intersection-observer --save
直接放置在Scrollama
组件内部的任何元素都将被视为步骤。随着用户滚动,将触发并发出事件,您可以根据需要进行处理:
step-enter
:当步进元素的顶部或底部边缘进入偏移阈值时step-exit
:当步进元素的顶部或底部边缘退出偏移阈值时step-progress
:不断触发通过阈值已取得的进度(0-1)这是一个简单的示例,其中三个<div>
元素作为步骤和一个step-enter
事件
<template>
<Scrollama @step-enter="stepEnterHandler">
<div class="step1" data-step="a">...</div> // 像.step1这样的类有助于调整步骤的样式和维度
<div class="step2" data-step="b">...</div> // data-*属性有助于存储处理程序中使用的指令
<div class="step3" data-step="c">...</div>
</Scrollama>
</template>
<script>
import 'intersection-observer' // 跨浏览器支持
import Scrollama from 'vue-scrollama'
export default {
components: {
Scrollama
},
methods: {
stepEnterHandler ({element, index, direction}) {
// 按要求处理台阶事件
console.log(element, index, direction)
}
}
}
<style src="vue-scrollama/dist/vue-scrollama.css"></style>
<style>
/* 你的风格 */
</style>
要添加粘性图形元素(示例),请将其放入名称为“ graphic”的插槽中。
// 类有助于调整图形的样式和尺寸
<template>
<Scrollama @step-enter="stepEnterHandler">
<div slot="graphic" class="graphic">...</div>
<div class="step1" data-step="a">...</div>
<div class="step2" data-step="b">...</div>
<div class="step3" data-step="c">...</div>
</Scrollama>
</template>
04/21/2021
10/18/2019