javascript - fullpage.js 的多个实例

Question

我正在尝试将 fullpage.js 用于一个网站上的两个不同部分。基本上，当点击一张幻灯片时，它会在下面显示一个子包装 div，它有自己的部分，可以在主要部分继续之前垂直滚动。

这是我正在使用的代码。我正在尝试通过 ajax 加载它，但我想知道是否有更简单的方法可以忽略。

$("#wrapper").fullpage({
    verticalCentered: true,
    resize : true,
    anchors: ['section1', 'section2', 'section3', 'about'],
    //menu:'#menu',
    customScroll:true,
    onLeave: function(index, nextIndex, direction){
        //console.log(index+'|'+nextIndex+'|'+direction);

        if (direction == 'down'){
            $('.section:nth-child('+index+')').animate({'top':'0%'},0)
            $('.section:nth-child('+nextIndex+')').animate({'top':'100%'},0).animate({'top':'0%'},500);
        } else {
            $('.section:nth-child('+nextIndex+')').animate({'top':'0%'},0);
            $('.section:nth-child('+index+')').animate({'top':'0%'},0).animate({'top':'100%'},500).animate({'top':'500%'},0);
        }
    }
});

然后是删除它并添加新包装器的代码:

$(".sub_section").click(function() {
    $("#wrapper").fullpage.destroy('all');
    if (sub_section_open == false) {
        $("#left_border").animate({"borderLeftWidth" : "0px"}, 300);
        $("#right_border").animate({"borderRightWidth" : "0px"}, 300);
        $("#top_border").animate({"borderTopWidth" : "0px"}, 300, function() {
            $("#left_border").hide();
            $("#right_border").hide();
            $("#top_border").hide();    
        }); 

        $(".sub_section .letters").slideUp("slow", function(){
            $(".sub_section .content").css({'z-index': 1}); 
        });
        sub_section_open = true;
        $(".btn_sub_section_close").show();
        $( "#wrapper" ).load( "section1.html" );
        $("#section1").fullpage({
            verticalCentered: true,
            resize : true,
            anchors: ['ssection1', 'ssection2', 'ssection3', 'ssection4'],
            menu:'#menu'
        });
    }
});

有什么想法吗？谢谢!

Answer 1

fullpage.js 只支持一个实例。

它是一个全页插件，并不是为了支持它们而设计的，因为它没有意义。它是整页，所有页面将成为整页的一个实例的一部分。

您可以很容易地在代码中看到它的证据，例如 in this line :

$('.fp-section').each(function(index){

页面上的任何部分，无论它使用哪个容器/包装器，都将在一个完整页面实例中处理。