Need help with vue-fullpage?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

wendaosanshou
220 Stars 59 Forks 75 Commits 21 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 193,884
HTML
vuejs
js
61 commits
# 472,777
HTML
vuejs
js
2 commits
# 50,390
crx
Shell
Python
vuejs
2 commits
# 593,861
HTML
vuejs
js
1 commit

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.