Fullpage JS，分页执行

Question

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

由于我有内页，所以这些页面也必须使用滚动脚本。但即使将函数创建为范围以在所有页面上工作或使用不同的名称创建它并在每个 FullPage returns 中开始，也会出现以下错误：

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

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

遵循我正在使用的函数：

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 并销毁整页，因此您设法再次调用另一个 div。

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

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

Fullpage JS，分页执行

Fullpage JS, execute on different pages

javascript

jquery

angularjs

fullpage.js