基于vue的fullpage.js单页滚动插件


Posted in Javascript onMarch 20, 2017

基于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 的配置

<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>

demo

地址:

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

http://vue.wendaosanshou.top/vue_fullpage_demo/

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用jscript实现列出安装的软件列表
Jun 18 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
ExpressJS入门实例
Jan 14 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
Vue结合原生js实现自定义组件自动生成示例
Jan 21 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
原生js滑动轮播封装
Jul 31 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
windows下vue.js开发环境搭建教程
Mar 20 #Javascript
js中DOM三级列表(代码分享)
Mar 20 #Javascript
深入对Vue.js $watch方法的理解
Mar 20 #Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 #Javascript
js获取当前周、上一周、下一周日期
Mar 19 #Javascript
浅析bootstrap原理及优缺点
Mar 19 #Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 #Javascript
You might like
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
处理php自动反斜杠的函数代码
2010/01/05 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
PHP生成器简单实例
2015/05/13 PHP
PHP编写RESTful接口
2016/02/23 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
[48:35]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 TNC vs Optic
2018/04/03 DOTA
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
Python+django实现文件上传
2016/01/17 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
Python的in,is和id函数代码实例
2020/04/18 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
国际花店:Pickup Flowers
2020/04/10 全球购物
法律进企业活动方案
2014/03/04 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL