全页JS,在不同的页面上执行 [英] Fullpage JS, execute on different pages
问题描述
我正在AngularJS中开发一个项目,我正在使用Fullpage.js来滚动页面。到目前为止一切顺利,问题如下:
I'm developing a project in AngularJS and I am using the Fullpage.js to scroll the page. So far so good, the problem is as follows:
由于我有内页,所以还必须使用滚动脚本这些页面。
但是即使创建作为Scope的函数来处理所有页面或使用不同的名称创建它并从每个FullPage开始都会返回以下错误:
As I have inside pages, must also use the scroll script these pages. But even creating the function as Scope to work on all pages or creating it with different name and starting in each of the FullPage returns the following error:
FullPage:Fullpage.js只能初始化一次并且你多次执行!
有谁知道我怎么能这样做当我启动另一个页面的功能,我取消了上一页的FullPage功能并再次启动当前控制器的另一个功能?
Does anyone know how can I do so that when I start the function of another page, I cancel the function of FullPage the previous page and start another function of the current controller again?
跟随我正在使用的功能:
Follows function I'm using:
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);
}
推荐答案
是的,你应该致电同样的DIV并销毁FullPage,所以你设法再次调用另一个div。
Yes, you should call the same DIV and destroy the FullPage, so you managed to call in another div again.
if($('#agencia').fullpage() != ''){
$('#agencia').fullpage.destroy('all');
}
工作 - https://codepen.io/alvarotrigo/pen/bdxBzv
这篇关于全页JS,在不同的页面上执行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!