fullpage-vue
Version:
vue fullpage rollup
141 lines (140 loc) • 4.29 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue fullpage</title>
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1">
</head>
<body>
<link rel="stylesheet" type="text/css" href="//unpkg.com/animate.css@3.5.2">
<link rel="stylesheet" type="text/css" href="../src/fullpage.css">
<style type="text/css" media="screen">
body{
margin: 0;
}
.fullpage-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.page {
display: block;
text-align: center;
font-size: 26px;
color: #eee;
}
.page-1 {
padding-top: 100px;
background: #1bbc9b;
}
.page-2 {
padding-top: 100px;
background-color: rgb(75, 191, 195);
}
.page-3 {
padding-top: 50px;
background: #aabbcc;
}
h3,p{
font-size: 16px;
}
.button-group{
position: absolute;
top: 30px;
left: 30px;
z-index: 9;
}
.button-group button{
display: inline-block;
margin: 10px;
color: #000;
background: #fff;
background: rgba(255,255,255,.5);
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 9px 18px;
border: none;
outline: none;
}
.button-group button.active{
background: rgba(0,0,0,.5);
color: #fff;
}
</style>
<div id="app">
<template>
<div class="fullpage-container">
<div class="button-group">
<button type="button" :class="{active:index ==0}" @click="moveTo(0)">first page</button>
<button type="button" :class="{active:index ==1}" @click="moveTo(1)">Second page</button>
<button type="button" :class="{active:index ==2}" @click="moveTo(2)">Third page</button>
<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>
<div class="fullpage-wp" v-fullpage="opts" ref="fullpage">
<div class="page-1 page">
<h1 class="part-1" v-animate="{value: 'bounceInLeft'}">vue-fullpage.js</h1>
<h3 class="" v-animate="{value: 'bounceInLeft'}">A sigle-page scroll plugin based on vue@2.x,support for mobile and PC .</h3>
</div>
<div class="page-2 page">
<h2 class="part-2" v-animate="{value: 'bounceInRight'}">Easy to use plugin</h2>
</div>
<div class="page-3 page">
<h2 class="" v-animate="{value: 'bounceInTop'}">Working On Tablets</h2>
<h3 class="" v-animate="{value: 'bounceInBotton'}">Designed to fit different screen sizes as well as tablet and mobile devices. </h3>
<p class="part-3" v-animate="{value: 'bounceInLeft', delay: 0}">vue-fullpage</p>
<p class="part-3" v-animate="{value: 'bounceInRight', delay: 300}">vue-fullpage</p>
<p class="part-3" v-animate="{value: 'bounceInDown', delay: 600}">vue-fullpage</p>
<p class="part-3" v-animate="{value: 'zoomInDown', delay: 900}">vue-fullpage</p>
</div>
<div class="page-2 page" v-for="page in pageNum">
<h2 class="part-2" v-animate="{value: 'bounceInRight'}">page {{page}}</h2>
</div>
</div>
</div>
</template>
</div>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="../dist/fullpage.js"></script>
<script>
var Main = {
data () {
var that = this;
return {
index:0,
pageNum:0,
opts: {
start: 0,
dir: 'v',
loop: false,
duration: 300,
beforeChange: function (prev, next) {
console.log('before', prev, next)
that.index = next;
},
afterChange: function (prev, next) {
console.log('after', prev, next)
}
}
};
},
methods:{
moveTo:function(index){
this.$refs.fullpage.$fullpage.moveTo(index,true);
},
showPage:function(){
this.pageNum ++;
this.$refs.fullpage.$fullpage.$update();
}
}
}
var Ctor = Vue.extend(Main)
var app = new Ctor().$mount('#app')
</script>
</body>
</html>