Vue实现上下整屏滚动效果

使用的是vue-fullpage插件

实现了移动端的单页滚动效果，支持横向滚动和纵向滚动，支持animate.css里的所有动画指令

参考地址：https://github.com/wendaosanshou/vue-fullpage/blob/master/README_CN.md

1.安装：

cnpm install vue-fullpage --save

如果你想使用动画指令，请安装animate.css

cnpm install animate.css --save

 

2.在main.js需要引入该插件的css和js文件

import 'vue-fullpage/vue-fullpage.css'

import VueFullpage from 'vue-fullpage'

Vue.use(VueFullpage)

 

3.app.vue

在page-wp容器上加v-fullpage指令,v-fullpage的值是fullpage的配置 在page容器上加v-animate指令,v-animate的值是animate.css的动画效果

 1 <div class="fullpage-container">
 2   <div class="fullpage-wp" v-fullpage="opts">
 3     <div class="page-1 page">
 4       <p class="part-1" v-animate="{value: 'bounceInLeft'}">vue-fullpage</p>
 5     </div>
 6     <div class="page-2 page">
 7       <p class="part-2" v-animate="{value: 'bounceInRight'}">vue-fullpage</p>
 8     </div>
 9     <div class="page-3 page">
10       <p class="part-3" v-animate="{value: 'bounceInLeft', delay: 0}">vue-fullpage</p>
11       <p class="part-3" v-animate="{value: 'bounceInRight', delay: 600}">vue-fullpage</p>
12       <p class="part-3" v-animate="{value: 'zoomInDown', delay: 1200}">vue-fullpage</p>
13     </div>
14   </div>
15 </div>

 

4.JS:

 1 export default {
 2   data () {
 3     return {
 4       opts: {
 5         start: 0,
 6         dir: 'v',
 7         loop: false,
 8         duration: 500,
 9         stopPageScroll: true,
10         beforeChange: function (prev, next) {
11         },
12         afterChange: function (prev, next) {
13         }
14       }
15     }
16   }
17 }

 

5.CSS:

 1 <style>
 2 *{
 3   margin: 0;
 4   padding: 0;
 5 }
 6 #app{
 7   position: absolute;
 8   top: 0;
 9   bottom: 0;
10   left: 0;
11   width: 100%;
12   color:red;
13 }
14 .page-1{
15   background: rgba(0,0,0,0.8);
16 }
17 .page-2{
18   background: pink;
19 }
20 .page-3{
21   background: blueviolet;
22 }
23 .page-container {
24   position: absolute;
25   left: 0;
26   top: 0;
27   width: 100%;
28   height: 100%;
29 }
30 </style>

 

posted @ 2018-02-05 15:06  Various  阅读(9249)  评论(0)  编辑  收藏  举报