基本Vue问题：将fullpage.js包装器与其他行为集成

Question

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

我对Vue很新，我正在使用Fullpage.js Vue wrapper开展一个项目。虽然我有Fullpage功能，但我在整合其他行为时遇到了麻烦，例如这个基本的动画滚动功能detailed here。 handleScroll()方法与v-on元素上的h2指令相结合，只需添加一个类来触发动画。我的模板代码如下：

<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实例，返回Fullpage组件的选项，以及定义滚动动画方法和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属性和/或相关方法，因为它只保留false的值，并且在滚动时不会更改。如何根据需要更改此值并应用该类？感谢您在此提供任何帮助 - 如果问题不清楚，请告诉我。

Answer 1

我相信目标是在视图中出现一个部分时动态应用bounceInLeft类。为此，我们需要单独跟踪每个部分。滚动的布尔值已经扩展为具有根据部分命名的属性的对象，在本例中为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