fullpage-vue
vue 2.x fullpage rollup
Last updated 2 months ago by e23jiang .
MIT · Original npm · Tarball · package.json
$ cnpm install fullpage-vue 
SYNC missed versions from official npm registry.

fullpage-vue

A sigle-page scroll plugin based on vue@2.x,support for mobile and PC . 中文版

overview

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

Online demo

here's a jsfiddle demo Live demo

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
  • disabled : (default:false)

method

moveTo

Move to the specified page

movePrev

Move to the previous page

moveNext

Move to the next page

setDisabled

Change the value of disabled. A value of true disables move

$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-containerfullpage-wppageare 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 (currentSlideEl,currenIndex,nextIndex) {
        },
        afterChange: function (currentSlideEl,currenIndex) {
        }
      }
    }
  },
  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>

Current Tags

  • 1.9.0                                ...           latest (2 months ago)

23 Versions

  • 1.9.0                                ...           2 months ago
  • 1.8.3                                ...           8 months ago
  • 1.8.2                                ...           a year ago
  • 1.8.1                                ...           a year ago
  • 1.8.0                                ...           a year ago
  • 1.7.5                                ...           a year ago
  • 1.7.4                                ...           a year ago
  • 1.7.3                                ...           a year ago
  • 1.7.2                                ...           a year ago
  • 1.7.1                                ...           2 years ago
  • 1.7.0                                ...           2 years ago
  • 1.6.2                                ...           2 years ago
  • 1.6.1                                ...           2 years ago
  • 1.6.0                                ...           2 years ago
  • 1.5.3                                ...           2 years ago
  • 1.5.2                                ...           2 years ago
  • 1.4.2                                ...           2 years ago
  • 1.4.1                                ...           2 years ago
  • 1.3.1                                ...           2 years ago
  • 1.2.1                                ...           2 years ago
  • 1.2.0                                ...           2 years ago
  • 1.1.0                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 7
This Week 11
This Month 118
Last Day 4
Last Week 45
Last Month 176
Dependencies (5)
Dev Dependencies (2)
Dependents (1)

Copyright 2014 - 2017 © taobao.org |