滚动显示动画效果插件_滚动插件和动画滚动

最新推荐文章于 2024-10-12 15:19:06 发布

cuk5239

最新推荐文章于 2024-10-12 15:19:06 发布

阅读量738

点赞数

文章标签： vue js java css html ViewUI

原文链接：https://vuejsexamples.com/a-scrollspy-plugin-and-animated-scroll-to/

版权

滚动显示动画效果插件

vue2-scrollspy (vue2-scrollspy)

Scrollspy, and animated scroll-to, for Vue2, inspired by vue-scrollspy.

受vue-scrollspy启发，适用于Vue2的Scrollspy和动画滚动至。

View demo 查看演示 jsfiddle demo jsfiddle演示

安装 (Installation)

NPM (NPM)

$ npm install vue2-scrollspy --save

CDN (CDN)

<script src="//unpkg.com/vue2-scrollspy/dist/index.js"></script>

基本用法 (Basic Usage)

import Vue from 'vue';
import Scrollspy from 'vue2-scrollspy';
// use default options
Vue.use(Scrollspy);

// or custom options
Vue.use(Scrollspy, options);

<ul v-scroll-spy-active v-scroll-spy-link>
    <li>
        <a>Menu 1</a>
    </li>
    <li>
        <a>Menu 2</a>
    </li>
</ul>

<div v-scroll-spy>
    <div>
        <h1>Header 1</h1>
        <p>Content</p>
    </div>
    <div>
        <h1>Header 2</h1>
        <p>Content</p>
    </div>
</div>

组态 (Configuration)

v-scroll-spy (v-scroll-spy)

Declares container of sections for elements to scrollspy.

声明用于元素滚动的节的容器。

v-scroll-spy="{data: 'section'}": add a section data property in scope Vue instance that is binded to the section index.

v-scroll-spy="{data: 'section'}" ：在范围Vue实例中添加section数据属性，该属性绑定到节索引。
v-scroll-spy="{allowNoActive: true}": allow no active sections when scroll position is outside of the scrollspy container. Default behavior is too keep active at least one section in any case.

v-scroll-spy="{allowNoActive: true}" ：当滚动位置在scrollspy容器之外时，不允许活动部分。在任何情况下，默认行为都至少应保持活动状态。
v-scroll-spy="{offset: 50}": add an offset for scroll and active events.

v-scroll-spy="{offset: 50}" ：添加滚动和活动事件的偏移量。
v-scroll-spy="{time: 200, steps: 30}": set the animation options.

v-scroll-spy="{time: 200, steps: 30}" ：设置动画选项。
$scrollTo(index: int) is provided on scope Vue instance to invoke a scroll to the given section index.

作用域Vue实例上提供了$scrollTo(index: int)来调用到给定节索引的滚动。
v-section-selector: set section which should scrollto

v-section-selector ：设置应该滚动到的部分

v-scroll-spy-active (v-scroll-spy-active)

Set the active css class on element that match the index of current scrollspy.

在与当前scrollspy的索引匹配的元素上设置active CSS类。

v-scroll-spy-active="{selector: 'li.menu-item', class: 'custom-active'}": customize elements selection and class
v-scroll-spy-active="{selector: 'li.menu-item', class: 'custom-active'}" ：自定义元素选择和类

name to apply. By default, it will use direct children and apply
申请名称。默认情况下，它将使用直接子级并应用
active class.
active课。

v-scroll-spy-link (v-scroll-spy-link)

Add click handler on children elements that will scroll to the related section.

在子元素上添加点击处理程序，该元素将滚动到相关部分。

v-scroll-spy-link="{selector: 'a.menu-link'}": customize elements selection. By default, it will use a to
v-scroll-spy-link="{selector: 'a.menu-link'}" ：定制元素选择。默认情况下，它会使用a以

select all links.
选择所有链接。

贝塞尔曲线动画 (Bezier animations)

Example:

例：

import scrollSpy, { Easing } from 'vue2-scrollspy';

Vue.use(scrollSpy, {
  easing: Easing.Cubic.In
});

Easing options: http://tweenjs.github.io/tween.js/examples/03_graphs.html

轻松选项： http : //tweenjs.github.io/tween.js/examples/03_graphs.html

注意 (Note)

You should have the same number of children elements for v-scroll-spy, v-scroll-spy-active v-scroll-spy-link for directives to work properly.

v-scroll-spy ， v-scroll-spy-active v-scroll-spy-link的子元素数应相同，以使指令正常工作。

If you need to share multiple scroll-spy in the same page, you can add data-scroll-spy-id="" on each element where a directive is declared.

如果需要在同一页面中共享多个scroll-spy，则可以在声明指令的每个元素上添加data-scroll-spy-id="" 。

If you want to set something else (not body) to scroll container, you could:

如果要设置其他内容(而不是主体)来滚动容器，则可以：

<div class="container" v-scroll-spy>
    <div>
        <h1>Header 1</h1>
        <p>Content</p>
    </div>
    <div>
        <h1>Header 2</h1>
        <p>Content</p>
    </div>
</div>