A sigle-page scroll plugin based on [email protected],support for mobile and PC . 中文版
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 Live demo
npm install fullpage-vue --save
If you want use animate instruction, please install animate.css
npm install animate.css --save
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 || autohiddenHidden overflowscrollHandling the scroll bars of pageautoHandling all scroll bars in page,Start checking from triggered elementsdisabled: (default:false)
Move to the specified page
/**
*
* @param {Number} moveToIndex Move to index
* @param {Boolean} animated Animated move？
* @param {Boolean} force Fore move default:false
*/
$fullpage.moveTo(1/*move to index*/,false /*animatied*/,true /*force move?*/)Move to the previous page
Move to the next page
Change the value of disabled. A value of true disables move
Update the dom structure,for example v-for and v-if Affect the number of pages, need to manually call $update
<button type="button"
v-for="btn in pageNum"
:class="{active:index == btn + 2}"
@click="moveTo(btn+2)">page {{btn+2}}</button>
<button type="button" @click="showPage()">add page</button>
<div class="page-2 page" v-for="page in pageNum">
<h2 class="part-2" v-animate="{value: 'bounceInRight'}">page {{page}}</h2>
</div> showPage:function(){
this.pageNum ++;
this.$refs.fullpage.$fullpage.$update();
}Import the plugin of css and js file in main.js
import 'animate.css'
import 'fullpage-vue/src/fullpage.css'
import VueFullpage from 'fullpage-vue'
Vue.use(VueFullpage)template
fullpage-container、fullpage-wp、pageare default class name.
Add the v-fullpage command to the page-wp container.
Add the v-animate command to the page container.
<div class="fullpage-container">
<div class="fullpage-wp" v-fullpage="opts" ref="example">
<div class="page-1 page">
<p class="part-1" v-animate="{value: 'bounceInLeft'}">fullpage-vue</p>
</div>
<div class="page-2 page">
<p class="part-2" v-animate="{value: 'bounceInRight'}">fullpage-vue</p>
</div>
<div class="page-3 page">
<p class="part-3" v-animate="{value: 'bounceInLeft', delay: 0}">fullpage-vue</p>
<p class="part-3" v-animate="{value: 'bounceInRight', delay: 600}">fullpage-vue</p>
<p class="part-3" v-animate="{value: 'zoomInDown', delay: 1200}">fullpage-vue</p>
</div>
</div>
<button @click="moveNext">next</button>
</div>script
fullpage-vue value please refer to api document
export default {
data() {
return {
opts: {
start: 0,
dir: 'v',
duration: 500,
beforeChange: function (currentSlideEl,currenIndex,nextIndex) {
},
afterChange: function (currentSlideEl,currenIndex) {
}
}
}
},
methods:{
moveNext(){
this.$refs.example.$fullpage.moveNext(); //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>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent