vue-fullpage

by wendaosanshou

wendaosanshou / vue-fullpage

一个实现fullpage.js功能的vue插件

210 Stars 61 Forks Last release: Not found 75 Commits 2 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

vue-fullpage

README:中文版

A sigle-page scroll plugin based on vue.js

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

Installation

npm install vue-fullpage --save

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

npm install animate.css --save
animate.css usage

Document

api document

getting started

main.js

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

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

app.vue

template

fullpage-container
fullpage-wp
page
are default class name. Add the
v-fullpage
command to the
page-wp
container. Add the
v-animate
command to the
page
container.
html

vue-fullpage

vue-fullpage

vue-fullpage

vue-fullpage

vue-fullpage

script

vue-fullpage
value please refer to api document
js
export default {
  data() {
    return {
      opts: {
        start: 0,
        dir: 'v',
        duration: 500,
        beforeChange: function (prev, next) {
        },
        afterChange: function (prev, next) {
        }
      }
    }
  }
}

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.