Question

我在angular-fullstac-generator项目中实现fullpage.js时遇到问题。然后问题是我用凉亭安装它然后我试着像在说明书中使用它。对于测试，我将以下代码添加到index.html中，其中包含控制器和指令的脚本以及其他内容。我在jquery.js之后发布了这个。

index.html：

<script>
  $(document).ready(function() {

    $('#fullpage').fullpage({
      //Navigation
      menu: false,
      anchors:['firstSlide', 'secondSlide'],
      navigation: false,
      navigationPosition: 'right',
      navigationTooltips: ['firstSlide', 'secondSlide'],
      slidesNavigation: true,
      slidesNavPosition: 'bottom',

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

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

      //Design
      controlArrows: true,
      verticalCentered: true,
      resize : true,
      sectionsColor : ['#ccc', '#fff'],
      paddingTop: '3em',
      paddingBottom: '10px',
      fixedElements: '#header, .footer',
      responsive: 0,

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

      //events
      onLeave: function(index, nextIndex, direction){},
      afterLoad: function(anchorLink, index){},
      afterRender: function(){},
      afterResize: function(){},
      afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
      onSlideLeave: function(anchorLink, index, slideIndex, direction){}
    });
  });
</script>

和部分观点：

<div id="fullpage">
  <div class="section">Some section</div>
  <div class="section">Some section</div>
  <div class="section">Some section</div>
  <div class="section">Some section</div>
</div>

我收到错误：

“fullPage：错误！Fullpage.js需要使用选择器进行初始化。例如：$（'＃myContainer'）。fullpage（）;”

如何解决这个问题？ thx for thewsers！

Answer 1

2018年11月更新

现在fullPage.js版本3可用于Angular官方组件： https://github.com/alvarotrigo/angular-fullpage

注意它也不再需要jQuery了！

如果您使用的是Angular.js使用的AJAX技术，您可能会多次调用初始化。指向您网站的链接有助于解决问题。

您可能希望使用fullPage.js提供的函数reBuild和destroy。

或者，否则，请使用站点中的普通链接而不是AJAX调用。

不要忘记检查this topics in fullPage.js forum，它们可能会对您有所帮助。

带有angular.js的Fullpage.js

1 个答案:

2018年11月更新