Vue.js的滚动驱动交互– vue-scrollama

Vue.js的滚动驱动交互– vue-scrollama
插件名称 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

  • v1.2.0

10/18/2019

  • v1.1.9