javascript - Vue 的整页滚动？

Question

有模拟库吗fullpage.js对于 Vue？需要一个可以滚动浏览组件以及 fullpage.js 的组件.

Answer 1

也许您可以考虑为此使用一个指令。

首先加载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
    }
  }
}