javascript - Vue基础问题: Integrating fullpage. js wrapper with other behaviors

Question

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

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

<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当一个部分出现在 View 中时动态分类。为此，我们需要单独跟踪每个部分。滚动的 bool 值已扩展为一个对象，其属性根据部分命名，在本例中为 page1 , page2 , page3 .

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

接下来，添加 scrolled反对您的数据使用 afterLoad回调以改变适当的滚动页面 bool 值。

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