基于 vue 的 fullpage.js
可实现移动端的单页滚动效果,支持横向滚动和纵向滚动
目前还未进行大规模兼容性测试。有 bug 请提问至 issues
- npm install vue-fullpage --save
- import VueFullpage from 'vue-fullpage'
- Vue.use(VueFullpage)
或
- var vueFullpage = require('vue-fullpage')
- Vue.use(vueFullpage)
api 文档
在 main.js 需要引入该插件的 CSS 和 js 文件
- import VueFullpage from 'vue-fullpage'
- Vue.use(VueFullpage)
模板部分:在 page-container 容器加入 v-cover 指令防止闪烁 在 page-wp 容器上加 v-page 指令,指令值是 fullpage 的配置
- <div class="page-container">
- <div v-page="opts" class="page-wp">
- <div class="page page1">
- <p class="part part1" v-animate="'slideIn'">
- vue-fullpage
- </p>
- </div>
- <div class="page page2">
- <p class="part part2" v-animate="'slideIn'">
- vue-fullpage
- </p>
- </div>
- <div class="page page3">
- <p class="part part3" v-animate="'slideIn'">
- vue-fullpage
- </p>
- </div>
- <div class="page page4">
- <p class="part part4" v-animate="'fadeIn'">
- vue-fullpage
- </p>
- </div>
- </div>
- </div>
js 部分:提供 vue-fullpage 的自定义指令
- <script>
- export
- default {
- data() {
- return {
- opts:
- {
- start:
- 0,
- dir: 'v',
- loop: false,
- duration: 500,
- stopPageScroll: true,
- beforeChange: function(prev, next) {},
- afterChange: function(prev, next) {}
- }
- }
- }
- }
- </script>
css 部分:page-container 需要固定宽度和高度,fullpage 会使用父元素的宽度和高度。
如下设置可使滚动页面充满全屏
- <style>
- .page-container {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- }
- </style>
地址:
请使用 chrome 的手机模拟器或手机访问
http://vue.wendaosanshou.top/vue_fullpage_demo/
来源: http://www.2cto.com/kf/201703/614341.html