vue脚手架vue数据交互

Vue Scrollama (Vue Scrollama)

A Vue component to easily setup scroll-driven interactions (aka scrollytelling). Uses Scrollama under the hood.

一个Vue组件，可轻松设置滚动驱动的交互(又称滚动讲演)。 在引擎盖下使用Scrollama。

安装 (Installation)

npm install vue-scrollama intersection-observer

Scrollama makes use of IntersectionObserver and you'll want to manually add its polyfill intersection-observer for cross-browser support.

Scrollama使用了IntersectionObserver ，您将需要手动添加其polyfill intersection-observer器以支持跨浏览器。

基本用法 (Basic Usage)

Any elements placed directly inside a Scrollama component will be considered as steps. As the user scrolls, step events will be triggered and emitted which you can handle as required.

直接放置在Scrollama组件内部的任何元素都将被视为步骤。 随着用户滚动，将触发并发出步进事件，您可以根据需要进行处理。

• step-enter

  步进输入

• step-exit

  逐步退出

• step-progress

  逐步进行

• container-enter

  容器输入

• container-exit

  集装箱出口

Here's a simple example with three <div> elements as steps and a step-enter event

这是一个简单的示例，其中三个<div>元素作为步骤和一个step-enter事件

// classes are helpful to adjust the style and dimensions of a step
// data-* attributes are useful to store instructions to be used in handlers
<template>
  <Scrollama @step-enter="stepEnterHandler">
    <div class="step1" data-step="a">...</div>
    <div class="step2" data-step="b">...</div>
    <div class="step3" data-step="c">...</div>
  </Scrollama>
</template>

<script>
import 'intersection-observer' // for cross-browser support
import Scrollama from 'vue-scrollama'

export default {
  components: {
    Scrollama
  },
  methods: {
    stepEnterHandler ({element, index, direction}) {
      // handle the step-event as required here
      console.log(element, index, direction)
    }
  }
}

粘性图形 (Sticky Graphic)

To add a sticky graphic element to the mix (example), place it into a slot with name 'graphic'.

要将粘性图形元素添加到混合中( 示例 )，请将其放入名称为“ graphic”的插槽中。

// classes are helpful to adjust the style and dimensions of the 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>

Scrollama选项 (Scrollama Options)

Props passed to the Scrollama component will be passed on to scrollama's setup method as documented here.

传递给Scrollama组件的道具将传递给scrollama的setup方法，如此处所述 。

• offset

  抵消

• progress

  进展

• threshold

  阈

• order

  订购

• once

  一旦

• debug

  调试

// example with offset option
<template>
  <Scrollama @step-enter="stepHandler" :offset="0.8">
      ...
  </Scrollama>
</template>

多个实例 (Multiple instances)

If you have more than one Scrollama components rendered at a time, you will need to pass on id as a prop.

如果一次渲染多个Scrollama组件，则需要传递id作为道具。

<template>
  <Scrollama @step-enter="stepHandler1" id="scrollama1">
      ...
  </Scrollama>
  <Scrollama @step-enter="stepHandler2" id="scrollama2">
      ...
  </Scrollama>
</template>

翻译自: https://vuejsexamples.com/easy-scroll-driven-interactions-with-vue-scrollama/

vue脚手架vue数据交互