基于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 相关文章推荐
javascript textContent与innerText的异同分析
Oct 22 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
js学使用setTimeout实现轮循动画
Jul 17 Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
el-table-column 内容不自动换行的解决方法
Aug 14 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
利用PHP创建动态图像
2006/10/09 PHP
php 生成饼图 三维饼图
2009/09/28 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
pandas数据拼接的实现示例
2020/04/16 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
社区工作者演讲稿
2014/05/23 职场文书
2016春节慰问信范文
2015/03/25 职场文书
债务纠纷起诉书
2015/05/20 职场文书
离婚财产分割协议书
2015/08/11 职场文书
高中政治教学反思
2016/02/23 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
pytorch 如何使用float64训练
2021/05/24 Python
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python
讨论nginx location 顺序问题
2022/05/30 Servers