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

Question

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

我是 Vue 的新手，我正在使用 Fullpage.js Vue wrapper 进行一个项目。虽然我的整页功能正常工作，但我在集成其他行为时遇到了麻烦，例如这个基本的滚动动画功能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