fullpage-vue

A sigle-page scroll plugin based on [email protected],support for mobile and PC.

View demo Download Source

To achieve sigle-page scroll in mobile, support horizontal scroll and vertical scroll, support all the animation instructions of animate.css.

Installation

npm install fullpage-vue --save

If you want use animate instruction, please install animate.css

npm install animate.css --save

animate.css usage

Document

options

  • start : (default:0) Display first page
  • duration : (default:500)
  • loop : (default:false)
  • dir : (default:v) Direction of movement
  • der : (default:0.1)
  • movingFlag : (default:false)
  • beforeChange : (default:function) Before change callback
  • afterChange : (default:function) After change callback
  • overflow : (default:hidden) hidden || scroll || auto
    hidden Hidden overflow
    scroll Handling the scroll bars of page
    auto Handling all scroll bars in page,Start checking from triggered elements

method

moveTo

Move to the specified page

movePrev

Move to the previous page

moveNext

Move to the next page

$upadte

Update the dom structure,for example v-for and v-if Affect the number of pages, need to manually call $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();
    }

getting started

main.js

Import the plugin of css and js file in main.js

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

app.vue

template

fullpage-container、fullpage-wp、pageare default class name.
Add the v-fullpage command to the page-wp container.
Add the v-animate command to the page container.

<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>

script

fullpage-vue value please refer to api document

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

style

Set the page-container container's width and height what do you want, and the v-fullpage command will adapt the width and height of the parent element.
The following settings allow the scrolling page to fill the full screen.

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

GitHub