Vue 基础问题：Integrating fullpage.js wrapper with other behaviors

Question

**更新* 我在这里添加了一个 Codepen，记录了这个问题：https://codepen.io/nickpish/pen/MRJVMe

我是 Vue 的新手，我正在使用 Fullpage.js Vue wrapper. While I have the Fullpage functionality working, I'm having trouble integrating other behaviors, such as this basic animation-on-scroll function detailed here 开发一个项目。 handleScroll() 方法与 h2 元素上的 v-on 指令相结合，只需添加一个 class 即可触发动画。我的模板代码如下：

<template>
    <full-page ref="fullpage" :options="options" id="fullpage">
        <div class="section">
            <h3 :class="{'bounceInLeft': scrolled}" v-on="handleScroll" class="animated">{{scrolled}}</h3>
        </div>
        <div class="section">
            <div class="slide">
                <h3>Slide 2.1</h3>
            </div>
            <div class="slide">
                <h3>Slide 2.2</h3>
            </div>
            <div class="slide">
                <h3>Slide 2.3</h3>
            </div>
        </div>
        <div class="section">
            <h3>Section 3</h3>
        </div>
    </full-page>
</template>

我的 Vue 实例，返回全页组件的选项，以及定义滚动动画方法和 scrolled 数据属性如下：

// create vue instance w/ fullpage
new Vue({
    el: '#app',
    data() {
        return {
            scrolled: false,
            options: {
                navigation: true,
                menu: '#nav-menu',
                anchors: ['page1', 'page2', 'page3'],
                sectionsColor: ['#41b883', '#ff5f45', '#0798ec', '#fec401', '#1bcee6', '#ee1a59', '#2c3e4f', '#ba5be9', '#b4b8ab']
            },
        }
    },
    methods: {
        handleScroll() {
            let obj = document.querySelector('h3');
            let {top,bottom} = obj.getBoundingClientRect();
            let height = document.documentElement.clientHeight;
            this.scrolled = top < height && bottom >0;
        }
    },
    created() {
        window.addEventListener('scroll', this.handleScroll);
    },
    destroyed() {
        window.removeEventListener('scroll', this.handleScroll);
    }
});

我显然没有正确实现 scrolled 属性 and/or 相关方法，因为它只是保留 false 的值并且不会在滚动时改变。我怎样才能改变这个值，并根据需要应用 class？感谢您提供的任何帮助 - 如果问题有任何不清楚之处，请告诉我。

Answer 1

我相信目标是在某个部分出现在视图中时动态应用 bounceInLeft class。为此，我们需要单独跟踪每个部分。滚动的布尔值已扩展为具有根据部分命名的属性的对象，在本例中为 page1、page2、page3.

<h3 :class="{'bounceInLeft': scrolled.page1}" class="animated">{{scrolled.page1}}</h3>

接下来，将 scrolled 对象添加到您的数据中，使用 afterLoad 回调来改变适当的滚动页面布尔值。

new Vue({
    el: "#app",
    data: function() {
        return {
            scrolled: {
                page1: false,
                page2: false,
                page3: false
            },
            options: {
                licenseKey: null,
                afterLoad: this.afterLoad,
                navigation: true,
                anchors: ["page1", "page2", "page3"],
                sectionsColor: ["#41b883", "#ff5f45", "#0798ec"]
            }
        };
    },
    methods: {
        afterLoad: function(origin, destination, direction) {
            const { top, bottom } = destination.item.getBoundingClientRect();
            const height = document.documentElement.clientHeight;
            this.scrolled[destination.anchor] = top < height && bottom > 0;
        }
    }
});

https://codepen.io/RichardAyotte/pen/axpKoQ

Vue 基础问题：Integrating fullpage.js wrapper with other behaviors

Basic Vue question: Integrating fullpage.js wrapper with other behaviors

javascript

vue.js

fullpage.js