一个实现fullpage.js功能的vue插件
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:
Readme
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 --saveanimate.css usage
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、
pageare default class name. Add the
v-fullpagecommand to the
page-wpcontainer. Add the
v-animatecommand to the
pagecontainer.
htmlvue-fullpage
vue-fullpage
vue-fullpage
vue-fullpage
vue-fullpage
script
vue-fullpagevalue 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-containercontainer's width and height what do you want, and the
v-fullpagecommand will adapt the width and height of the parent element. The following settings allow the scrolling page to fill the full screen.