a single page scroll plugin fo

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

/** * * @param {Number} moveToIndex Move to index * @param {Boolean} animated Animated move？ * @param {Boolean} force Fore move default:false */ $fullpage.moveTo(1/*move to index*/,false /*animatied*/,true /*force move?*/) movePrev

Move to the previous page

moveNext

Move to the next page

setDisabled

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

$update

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 (currentSlideEl,currenIndex,nextIndex) { }, afterChange: function (currentSlideEl,currenIndex) { } } } }, methods:{ 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> .fullpage-container { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } </style>