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实例返回整页组件的选项，以及定义滚动动画方法和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

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

1 个答案: