带有React的Fullpage.js - 多次调用

  • Z时代
  • 2024-01-10
  • 分类：问答

我需要在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不是一个函数

我不知道该怎么办，请您帮忙？

回答：

最简单的方法是使用不同的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});

以上是 带有React的Fullpage.js - 多次调用 的全部内容， 来源链接： utcz.com/qa/263977.html

回到顶部