基于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 相关文章推荐
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
jquery.tmpl JQuery模板插件
Oct 10 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 Javascript
js生成随机数方法和实例
Jan 17 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 Javascript
基于Vue实现微前端的示例代码
Apr 24 Javascript
openlayers实现地图测距测面
Sep 25 Javascript
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
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
2018/02/11 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
python脚本设置系统时间的两种方法
2016/02/21 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
销售经理工作职责范文
2013/12/03 职场文书
九一八事变演讲稿
2014/09/05 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL