fullpage-vue
A sigle-page scroll plugin based on vue@2.x,support for mobile and PC . 中文版
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 Live demo
Installation
npm install fullpage-vue --save
If you want use animate instruction, please install animate.css
npm install animate.css --save
Document
options
start
: (default:0
) Display first pageduration
: (default:500
)loop
: (default:false
)dir
: (default:v
) Direction of movementder
: (default:0.1
)movingFlag
: (default:false
)beforeChange
: (default:function
) Before change callbackafterChange
: (default:function
) After change callbackoverflow
: (default:hidden
) hidden || scroll || autohidden
Hidden overflowscroll
Handling the scroll bars of pageauto
Handling all scroll bars in page,Start checking from triggered elementsdisabled
: (default:false
)
method
moveTo
Move to the specified page
/** * * @param * @param * @param */ $fullpage
movePrev
Move to the previous page
moveNext
Move to the next page
setDisabled
Change the value of disabled. A value of true disables move
$update
Update the dom structure,for example v-for
and v-if
Affect the number of pages, need to manually call $update
page {{btn+2}} add page page {{page}}
{ thispageNum ++; this$refsfullpage$fullpage; }
getting started
main.js
Import the plugin of css and js file in main.js
Vue
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.
fullpage-vue fullpage-vue fullpage-vue fullpage-vue fullpage-vue next
script
fullpage-vue
value please refer to api document
{ return opts: start: 0 dir: 'v' duration: 500 { } { } } methods: { this$refsexample$fullpage; //Move to the next page }
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.
<style>
.fullpage-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
</style>