帶有React的Fullpage.js - 多次調用

我需要在React中實現一個網站，該網站有兩個頁面，每個頁面都有水平幻燈片。我檢查了反應fullpage的不同實現，但沒有一個似乎是我所需要的，因此我決定使用https://github.com/alvarotrigo/fullPage.js做出反應。我想多次調用它 - 在兩個不同的參數組件中。因此，在每個組件的，我把這個代碼用不同的錨：帶有React的Fullpage.js - 多次調用

componentWillMount() { 
    console.log("Will ount technical"); 
    $(document).ready(function() { 
     $.fn.fullpage.destroy('all'); 
     $('#fullpage').fullpage({ 
     anchors:['welcome', 'data'], 
     lockAnchors: false, 
     slidesNavigation: true 
     }); 
    }); 
    }

如果我打開每個頁面獨立（刷新之後）他們兩人的工作，但如果我瀏覽到他們每個人我掙的以下錯誤：fullPage：Fullpage.js只能初始化一次，而且您正在做多次！ 我發現在其中一個論壇上，也許我應該使用這個：$.fn.fullpage.destroy('all'); 但它不適合我，如果我使用此代碼我得到一個錯誤TypeError：$ .fn.fullpage.destroy不是一個函數

我不知道該怎麼辦，請您幫忙？

來源

2017-12-18 Kasia Żukowska

最簡單的方法是使用不同的fullpage.js容器。這種方式可以有條件地初始化它們：

if($('#container1').length){ 
    $('#container1').fullpage({YOUR_OPTIONS}); 
} 

if($('#container2').length){ 
    $('#container2').fullpage({YOUR_OPTIONS}); 
}

否則，你可以摧毀任何以前使用的情況下，但你必須要小心，不調用第一初始化前的破壞方法：

if(typeof $.fn.fullpage !== 'undefined'){ 
    $.fn.fullpage.destroy('all'); 
} 
$('#fullpage').fullpage({YOUR_OPTIONS});

來源

2017-12-19 10:17:04 Alvaro

帶有React的Fullpage.js - 多次調用

回答

相關問題