vue-fullpage

基于vue的fullpage.js

功能概述

可实现移动端的单页滚动效果，支持横向滚动和纵向滚动

兼容性

目前还未进行大规模兼容性测试。有bug请提问至issues

安装

npm install vue-fullpage --save

commonjs

import VueFullpage from 'vue-fullpage'
Vue.use(VueFullpage)

或

var vueFullpage = require('vue-fullpage')
Vue.use(vueFullpage)

文档

api文档

快速上手

main.js

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

import VueFullpage from 'vue-fullpage'
Vue.use(VueFullpage)

app.vue

模板部分： 在page-container容器加入v-cover指令防止闪烁 在page-wp容器上加v-page指令，指令值是fullpage的配置

  

    

      

        vue-fullpage
      
    
    

      

        vue-fullpage
      
    
    

      

        vue-fullpage
      
    
    

      

        vue-fullpage
      
    
  

js部分： 提供vue-fullpage的自定义指令

css部分： page-container需要固定宽度和高度，fullpage会使用父元素的宽度和高度。
如下设置可使滚动页面充满全屏

.page-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

demo

地址：

请使用chrome的手机模拟器或手机浏览器访问

vue.wendaosanshou.top/vue_fullpag…

感谢

代码参考 颜海镜 大神的项目：zepto.fullpage.js