vue 使用 fullpage 全屏滚动插件

香菊网 发表于: 2019-04-23 分类: js部分  H5部分  前端front  

一、下载vue-fullpage

// With bower
bower install vue-fullpage.js

// With npm
npm install --save vue-fullpage.js

二、main.js 引入 

import Vue from 'vue'
import VueFullPage from 'vue-fullpage.js'


Vue.use(VueFullPage);

new Vue({
  el: '#app',
  render: h => h(App)
});

三、*.vue 使用

<div>
    <full-page ref="fullpage" :options="options" id="fullpage">
    <div class="section">
      First section ...
    </div>
    <div class="section">
      Second section ...
    </div>
  </full-page>
</div>

四、script

new Vue({
  el: '#app',
  name: 'app',
  data() {
    return {
      options: {
        menu: '#menu',
        anchors: ['page1', 'page2', 'page3'],
        sectionsColor: ['#41b883', '#ff5f45', '#0798ec']
      },
    }
  }
});

五、方法回调

<script>
  export default {
      data() {
        return {
          options: {
            afterLoad: this.afterLoad,
          }
        }
      },

      methods: {
        afterLoad() {
          console.log("Emitted 'after load' event.");
        }
      }
    }
</script>

   或者 可以使用Vue.js的事件处理标准方法

<template>
  <div>
    <full-page @after-load="afterLoad">
        ....
    </full-page>
  </div>
</template>
<script>
  export default {
      methods: {
        afterLoad() {
          ...
        }
      }
    }
</script>
标签: js部分H5部分前端front
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮