基于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 获取页面的高度及滚动条的位置的代码
May 06 Javascript
jquery 查找select ,并触发事件的实现代码
Mar 30 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
Jul 01 Javascript
jQuery自定义数值抽奖活动代码
Jun 11 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
JavaScript代码调试方法实例小结
Jan 05 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
Vue指令实现OutClick的示例
Nov 16 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防止站外远程提交表单的方法
2014/10/20 PHP
javascript重写alert方法的实例代码
2013/03/29 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
python计算对角线有理函数插值的方法
2015/05/07 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
高考自主招生自荐信
2013/10/20 职场文书
计生专干事迹
2014/05/28 职场文书
培训通知
2015/04/17 职场文书
离婚案件被告代理词
2015/05/23 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android