Skip to content

Latest commit

 

History

History
154 lines (131 loc) · 3.84 KB

README_zh.md

File metadata and controls

154 lines (131 loc) · 3.84 KB
Raw

fullpage-vue

一个基于vue2.x fullpage 插件 支持移动端和pc端

在线demo

jsfiddle demo

安装

npm install fullpage-vue --save

如果你想使用动画指令，请安装animate.css

npm install animate.css --save

animate.css用法

文档

选项

  • start : (default:0) 默认显示那一页
  • duration : (default:500)
  • loop : (default:false)
  • dir : (default:v) 运动的方向 v 垂直 和 h 水平
  • der : (default:0.1)
  • movingFlag : (default:false)
  • beforeChange : (default:function) 页面切换前回调
  • afterChange : (default:function) 页面切换后回调
  • overflow : (default:hidden) hidden || scroll || auto 处理page中的滚动条 hidden 隐藏滚动条 scroll 处理page的滚动条 auto 处理page中所有元素的滚动条，从触发元素开始检查

method

moveTo

移动到指定页面

  /**
   *
   * @param {Number} moveToIndex 移动到指定坐标
   * @param {Boolean} animated 是否有动画
   * @param {Boolean} force 是否强制移动，忽略disable
   */
  $fullpage.moveTo(1,false ,true)

movePrev

移动到上一个页面

moveNext

移动到下一个页面

setDisabled

改变disabled的值，当值=true则禁止滑动

$upadte

改变Dom的结构，需要调用更新。例如：通过v-for和v-if影响page的数量都需要调用$update更新。

  <button type="button" 
    v-for="btn in pageNum"
    :class="{active:index == btn + 2}" 
    @click="moveTo(btn+2)">page {{btn+2}}</button>
  <button type="button" @click="showPage()">add page</button>
  
  <div class="page-2 page" v-for="page in pageNum">
    <h2 class="part-2" v-animate="{value: 'bounceInRight'}">page {{page}}</h2>
  </div>
    showPage:function(){
      this.pageNum ++;
      this.$refs.fullpage.$fullpage.$update();
    }

快速上手

main.js

在main.js需要引入该插件的css和js文件

import 'fullpage-vue/src/fullpage.css'
import VueFullpage from 'fullpage-vue'
Vue.use(VueFullpage)

app.vue

template

在page-wp容器上加v-fullpage指令,v-fullpage的值是fullpage的配置 在page容器上加v-animate指令,v-animate的值是animate.css的动画效果

<div class="fullpage-container">
  <div class="fullpage-wp" v-fullpage="opts" ref="example">
    <div class="page-1 page">
      <p class="part-1" v-animate="{value: 'bounceInLeft'}">fullpage-vue</p>
    </div>
    <div class="page-2 page">
      <p class="part-2" v-animate="{value: 'bounceInRight'}">fullpage-vue</p>
    </div>
    <div class="page-3 page">
      <p class="part-3" v-animate="{value: 'bounceInLeft', delay: 0}">fullpage-vue</p>
      <p class="part-3" v-animate="{value: 'bounceInRight', delay: 600}">fullpage-vue</p>
      <p class="part-3" v-animate="{value: 'zoomInDown', delay: 1200}">fullpage-vue</p>
    </div>
  </div>
  <button @click="moveNext">next</button>
</div>

js

fullpage-vue的值请参考api文档

export default {
  data() {
    return {
      opts: {
        start: 0,
        dir: 'v',
        duration: 500,
        beforeChange: function (currentSlideEl,currenIndex,nextIndex) {
        },
        afterChange: function (currentSlideEl,currenIndex,nextIndex) {
        }
      }
    }
  },
  methods:{
    moveNext(){
      this.$refs.example.$fullpage.moveNext(); //Move to the next page
    }
  }
}

style page-container需要固定宽度和高度，fullpage会自适应父元素的宽度和高度。
如下设置可使滚动页面充满全屏

<style>
.page-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
</style>