wendaosanshou/ vue-fullpage

JavaScript

CSS

HTML

vuejs

View on GitHub

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

刘涛 taomas

# 193,884

HTML

vuejs

61 commits

lixuejiang lixuejiang

# 472,777

HTML

vuejs

2 commits

g8up g8up

# 50,390

crx

Shell

Python

vuejs

2 commits

Forb Yuan f0rb

# 593,861

HTML

vuejs

1 commit

Readme

vue-fullpage

Name: vue-fullpage
Brand: vue-fullpage
SKU: //wendaosanshou/vue-fullpage
Rating: 2.3 (220 reviews)

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.