全页JS,在不同页面上执行

时间:2016-07-20 12:21:01

标签: javascript jquery angularjs fullpage.js

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

由于我有内页,还必须使用滚动脚本这些页面。 但是,即使创建作为Scope的函数来处理所有页面或使用不同的名称创建它并从每个FullPage开始,都会返回以下错误:

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);
    }

1 个答案:

答案 0 :(得分:2)

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



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




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