javascript - Fullpage JS，分页执行

Question

我正在使用 AngularJS 开发一个项目，我正在使用 Fullpage.js 来滚动页面。到目前为止一切顺利，问题如下:

因为我有内页，所以这些页面也必须使用滚动脚本。但是，即使将函数创建为适用于所有页面的 Scope 或使用不同的名称创建它并从每个 FullPage 开始，也会返回以下错误:

FullPage:Fullpage.js 只能初始化一次，而您正在多次初始化!

请问有谁知道如何在启动另一个页面的功能时，取消上一个页面的FullPage功能，重新启动当前 Controller 的另一个功能？

遵循我正在使用的功能:

vm.rolagem_home = function(){
        $timeout(function(){
         $('#site').fullpage({
                    //Navigation
                    menu: '#menu',
                    lockAnchors: false,
                    //anchors:['firstPage', 'secondPage', 'trespage'],
                    navigation: false,
                    navigationPosition: 'right',
                    //navigationTooltips: ['firstSlide', 'secondSlide'],
                    showActiveTooltip: false,
                    slidesNavigation: true,
                    slidesNavPosition: 'bottom',

                    //Scrolling
                    css3: true,
                    scrollingSpeed: 700,
                    autoScrolling: true,
                    fitToSection: true,
                    fitToSectionDelay: 1000,
                    scrollBar: false,
                    easing: 'easeInOutCubic',
                    easingcss3: 'ease',
                    loopBottom: false,
                    loopTop: false,
                    loopHorizontal: true,
                    continuousVertical: false,
                    //normalScrollElements: '#element1, .element2',
                    scrollOverflow: false,
                    scrollOverflowOptions: null,
                    touchSensitivity: 15,
                    normalScrollElementTouchThreshold: 5,

                    //Accessibility
                    keyboardScrolling: true,
                    animateAnchor: true,
                    recordHistory: true,

                    //Design
                    controlArrows: true,
                    verticalCentered: true,
                  //  sectionsColor : ['#ccc', '#fff'],
                  paddingTop: '0em',
                  paddingBottom: '0px',
                  fixedElements: '#header, .footer',
                  responsiveWidth: 0,
                  responsiveHeight: 0,

                    //Custom selectors
                    sectionSelector: '.section',
                    slideSelector: '.slide',

                    //events
                    onLeave: function(index, nextIndex, direction){},
                    afterLoad: function(anchorLink, index){},
                    afterRender: function(){
                        $(window).load(function() {
                            $('#loading').hide();
                        });
                    },
                    afterResize: function(){},
                    afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
                        console.log(slideIndex);
                        if(slideIndex > 0){
                            $('.fp-prev').show();
                        }else{
                            $('.fp-prev').hide();
                        }
                        if(slideIndex == 6){
                            $('.fp-next').hide();
                        }else{
                            $('.fp-next').show();
                        }
                    },
                    onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){

                    }
                });
     }, 1000);
    }

Answer 1

是的，您应该调用同一个 DIV 并销毁 FullPage，这样您就可以再次调用另一个 div。

if($('#agencia').fullpage() != ''){ 
      $('#agencia').fullpage.destroy('all');   
}

工作 - https://codepen.io/alvarotrigo/pen/bdxBzv