初始化后向 fullPage.js 添加或删除 sections/slides

Question

我有一个树状结构的数据库，在我的网站中，我在 fullPage.js 插件的 "sections" 和 "slides" 中显示它们的内容时沿着树向下。问题是，当我将一个新部分附加到整页元素时，它不能成为插件的一部分。

我以这种方式追踪树的原因是，'leafs' 与根的距离可能不相同。

Tl;dr，我想这样做：https://github.com/alvarotrigo/fullPage.js/issues/41

Answer 1

如 link 中所述，您 post、fullpage.js 并未提供直接的方法。唯一的方法是每次添加新部分或幻灯片时销毁和初始化 fullpage.js。为避免 blinkings，我们可以记住活动部分并滑动以使用这些值再次初始化。

init();

function init(){
    $('#fullpage').fullpage({
        sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    });
}

//adding a section dynamically
$('button').click(function(){
    $('#fullpage').append('<div class="section">New section</div>');

    //remembering the active section / slide
    var activeSectionIndex = $('.fp-section.active').index();
    var activeSlideIndex = $('.fp-section.active').find('.slide.active').index();

    $.fn.fullpage.destroy('all');

    //setting the active section as before
    $('.section').eq(activeSectionIndex).addClass('active');

    //were we in a slide? Adding the active state again
    if(activeSlideIndex > -1){
        $('.section.active').find('.slide').eq(activeSlideIndex).addClass('active');
    }

    init();
});

Answer 2

谢谢，阿尔瓦罗！我还想包括我的方法以删除部分和幻灯片。

要删除底部的活动部分并转到上部：

$('#fullpage').on('click', 'button#removeSection', function() {
    var section = $('.fp-section.active');
    $.fn.fullpage.moveSectionUp();
    setTimeout(function(){
        section.remove();
    }, 700);
});

要删除最后一张幻灯片并转到左侧的幻灯片：

$('#fullpage').on('click', 'button#removeSlide', function() {
    var slide = $('.fp-section.active').find('.slide.active');
    $.fn.fullpage.moveSlideLeft();
    setTimeout(function(){
        slide.remove();
    }, 700);
});

700ms 是默认的动画时间。我们应该等待动画时间过去，以免在 section/slide 被移除时看到它（我们观察到闪烁）。

Answer 3

我需要做一些类似但更灵活的事情。在不移动当前页面内容的情况下启用上述部分非常重要。

我刚开始使用 FullPage.js 所以我没有尝试使用其他插件功能的任何问题。但我在这里分享结果。

有点复杂，但它满足了我的需要！例子在最后...

我不得不修改 2 行 FullPage.js 插件：

function moveSectionUp(){
        var prev = $(SECTION_ACTIVE_SEL).prevAll(SECTION_SEL + ':first');  // <--- THIS
        // var prev = $(SECTION_ACTIVE_SEL).prev(SECTION_SEL); // <--- INSTEAD OF THIS

和

function moveSectionDown(){
        var next = $(SECTION_ACTIVE_SEL).nextAll(SECTION_SEL + ':first');  // <--- THIS
        //var next = $(SECTION_ACTIVE_SEL).next(SECTION_SEL);  // <--- INSTEAD OF THIS

添加的功能如下：

fpInitSkipEl = function(funcSkipEl) {

    if ($.isFunction(funcSkipEl)) {
        var nextIndex = 0;
        $('.section').each(function() {
            nextIndex++;
            $('a[href="#' + $(this).attr('data-anchor') + '"]').on('click', function() {
                var dataAnchor = $(this).attr('href').toString().replace('#', '');
                return funcSkipEl($('.section').index($('.section.active')) + 1, $('.section').index($('.section[data-anchor="' + dataAnchor + '"]')) + 1);
            });
        });
    }

}

fpSkipEl = function(anchorsToSkip, index, nextIndex) {
    //debugger;
    $('.section').each(function() {
        if (anchorsToSkip.indexOf($(this).attr('data-anchor')) > -1
            && (index==-1 || $(this).attr('data-anchor') != $('.section').eq(index - 1).attr('data-anchor'))
            && (nextIndex==-1 || $(this).attr('data-anchor') != $('.section').eq(nextIndex - 1).attr('data-anchor'))) {

            $(this).css('display', 'none').removeClass('fp-section');
        } else {

            $(this).css('display', '').addClass('fp-section');
        }
        $.fn.fullpage.reBuild();
    });

}


fpGetRealIndex = function(index) {
    var realIndex = 0;
    $('.section').each(function() {
        realIndex++;
        if ($(this).hasClass('fp-section')) index--;
        if (index == 0) return false;
    });
    return realIndex;
}

主要用途是这样的：

fpInitSkipEl(function(index, nextIndex) { 
    // Fire on anchor Click
    // You can play with index (the current section) and nextIndex (the next section)

    if (index==1 && nextIndex==4) {
        fpSkipEl(['page2', 'page3'], index, nextIndex);

    }
});

并在 afterLoad

上初始化并设置您的逻辑

$('#fullpage').fullpage({
    anchors: ['page1', 'page2', 'page3', 'page4'],
    afterLoad: function(anchorLink, index) {
            // Get the real index with the hidden sections, oterwise index is relative to the visible sections.
            var realIndex = fpGetRealIndex(index);

            fpSkipEl([], -1, -1); // Show all sections
        }
    });

The simple working example on JSFiddle

A more complex example on JSFiddle

Answer 4

对于在 2020 年尝试此方法的任何人，$.fn.fullpage.destroy("all") 方法对我不起作用，我不得不改用 fullpage_api.destroy("all")。

Answer 5

我编辑了代码以动态创建另一个部分，以实现无限向下滚动：

$('#fullpage').fullpage({
    afterLoad: function(origin, destination, direction){
        if(destination.isLast && direction=='down') {
           $.get('YOUR_BACKEND_URL.php',function(html) {
                $('#fullpage').append(html);
                fullpage_api.destroy('all');
                init(); 
                fullpage_api.silentMoveTo(destination.index+1);
            });
        }
    }
});

Answer 6

对于任何想在没有 jQuery 的情况下执行此操作的人，这里有一个仅 js 的解决方案。我只使用整页部分，没有幻灯片，请参阅 alvaro 的回答以获取有关如何执行此操作的提示。如果需要，使用 babel 转译。

import newSection from "./new-section.html";

const addNewSection = () => {
  const fullpageEl = document.getElementById("fullpage");
  fullpageEl.insertAdjacentHTML("beforeend", newSection);
  const activeSectionIndex = Array.prototype.indexOf.call(fullpageEl.children, document.querySelector(".fp-section.active"));
  fullpage_api.destroy("all");
  document.querySelectorAll(".section")[activeSectionIndex].classList.add("active");
  initFullPage();
};

const initFullPage = () => {
  new fullpage("#fullpage", {});
};

document.addEventListener("DOMContentLoaded", function () {
  initFullPage();

  document.addEventListener("click", (e) => {
    if (!e.target.matches(".add-section-btn")) return;
    addNewSection();
  }
});

初始化后向 fullPage.js 添加或删除 sections/slides

Adding or removing sections/slides to fullPage.js after initialization

jquery

fullpage.js