一个实现fullpage.js功能的vue插件
README:中文版
A sigle-page scroll plugin based on vue.js
To achieve sigle-page scroll in mobile, support horizontal scroll and vertical scroll, support all the animation instructions of animate.css.
here's a jsfiddle demo
npm install vue-fullpage --save
If you want use animate instruction, please install animate.css
npm install animate.css --saveanimate.css usage
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)
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.