初始化后添加或删除sectionPage / slide到fullPage.js

我有一个树形结构的数据库，在我的网站上，当我在fullPage.js插件的“部分”和“幻灯片”中显示其内容时，我将走到树下。 问题是，当我将一个新的部分附加到一个fullpage元素时，它不能成为插件的一部分。

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

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

Answer 1

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

在线复制

init(); function init(){ $('#fullpage').fullpage({ sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'], }); } //adding a section dynamically $('button').click(function(){ $('#fullpage').append('
New section
'); //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是默认的动画时间。 我们应该等待动画时间通过，以便在删除时看不到部分/幻灯片（我们观察到闪烁的时间）。

Answer 3

我需要做类似的事情，但有一点灵活性。 并且重要的是启用上面的部分，而不移动当前页面的内容。

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

它有点复杂，但它做我需要的！ 最后的例子……

我不得不修改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 

这些是添加的function：

 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 } }); 

关于JSFiddle的简单工作示例

关于JSFiddle的一个更复杂的例子