Vue的整页滚动？

Question

Vue是否有模拟库fullpage.js？需要一个可以滚动组件以及fullpage.js的组件。

Answer 1

也许您可以考虑使用directive。

首先加载jquery和fullpage。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.fullpage/2.9.4/jquery.fullpage.min.js"></script>

然后创建一个新指令。

Vue.directive('fullpage', function(el, binding) {
  $(el).fullpage(binding.value)
})

使用示例：

<div v-fullpage="fullpageOptions">
  ...
</div>

在您的组件中：

data: {
  return {
    fullpageOptions: {
      sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
      anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
      menu: '#menu',
      css3: true,
      scrollingSpeed: 1000
    }
  }
}

Answer 2

现在您还可以使用the official fullpage.js component for Vue.js