我有一个树形结构的数据库，在我的网站中，当我在 fullPage.js 插件的“部分”和“幻灯片”中显示它们的内容时，我会沿着树向下走。问题是，当我将新部分附加到整页元素时，它不能成为插件的一部分。
我以这种方式跟踪树的原因是，“叶子”与根的距离可能不一样。
Tl;博士，我想这样做：https://github.com/alvarotrigo/fullPage.js/issues/41
【问题讨论】：
标签： jquery fullpage.js
正如您发布的链接中所说，fullpage.js 没有提供直接的方法。唯一的方法是在每次添加新部分或幻灯片时销毁和初始化 fullpage.js。 为了避免闪烁，我们可以记住活动部分并滑动以使用这些值再次初始化。
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();
});
【讨论】：
谢谢，阿尔瓦罗！我还想包含我的方法以删除部分和幻灯片。
要删除底部的活动部分并转到上部：
$('#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 是默认的动画时间。我们应该等待动画时间过去，以免在删除部分/幻灯片时看到它（我们观察到的闪烁）。
【讨论】：
我需要做一些类似但更灵活的事情。在不移动当前页面内容的情况下启用上述部分非常重要。
我刚开始使用FullPage.js，所以我没有尝试其他插件功能的任何问题。但我在这里分享结果。
这有点复杂，但它可以满足我的需求！例子在最后...
我不得不修改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
}
});
【讨论】：
对于 2020 年尝试此方法的任何人，$.fn.fullpage.destroy("all") 方法对我不起作用，我不得不改用 fullpage_api.destroy("all")。
【讨论】：
我编辑了代码动态创建另一个section，从而实现无限向下滚动：
$('#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);
});
}
}
});【讨论】：
对于任何想在没有 jQuery 的情况下执行此操作的人，这里是一个仅 js 的解决方案。我只使用整页部分，没有幻灯片，有关如何做到这一点的提示，请参阅阿尔瓦罗的回答。如果需要，使用 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();
}
});
【讨论】：