我需要在React中实现一个网站,该网站将有两个页面,每个页面都有水平幻灯片。我检查了反应全页的不同实现,但它们似乎都不适合我需要的东西,因此我决定使用https://github.com/alvarotrigo/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不是函数
我不知道该怎么办,能帮忙吗?
答案 0 :(得分:0)
现在是fullpage.js的官方React组件:
https://github.com/alvarotrigo/react-fullpage
最简单的方法是使用不同的fullpage.js容器。 这样你就可以有条件地初始化它们:
if( $('#container1').length ){
$('#container1').fullpage({YOUR_OPTIONS});
}
if( $('#container2').length ){
$('#container2').fullpage({YOUR_OPTIONS});
}
否则你可以销毁任何以前使用的实例,但是你必须小心不要在第一次初始化之前调用destroy方法:
if(typeof $.fn.fullpage !== 'undefined'){
$.fn.fullpage.destroy('all');
}
$('#fullpage').fullpage({YOUR_OPTIONS});