安装并使用

  • 安装
npm install --save vue-fullpage.js
  • 引入
// 引用fullpage 插件
import Vue from 'vue'
import 'fullpage.js/vendors/scrolloverflow' // Optional. When using scrollOverflow:true
import './fullpage.scrollHorizontally.min' // Optional. When using fullpage extensions
import VueFullPage from 'vue-fullpage.js' Vue.use(VueFullPage);

fullpage 配置

  • options
options: {
// 为每个section设置背景色
//sectionsColor: ["#f00","#0f0","#00f"],
//用来控制slide幻灯片的箭头,设置为false,两侧的箭头会消失
//controlArrows: false,
//每一页幻灯片的内容是否垂直居中
//verticalCentered: false,
//字体是否随着窗口缩放而缩放
//resize: true,
//页面滚动速度
//scrollingSpeed: 700,
//定义锚链接,用户可以快速打开定位到某一页面;不需要加"#",不要和页面中任意的id和name相同
//anchors: ["page1","page2","page3"],
//是否锁定锚链接
//lockAnchors: true,
//定义section页面的滚动方式,需要引入jquery.easings插件
//easing:,
//是否使用css3 transform来实现滚动效果
//css3: false,
//滚动到最顶部后是否连续滚动到底部
//loopTop: true,
//滚动到最底部后是否连续滚动到顶部
//loopBottom: true,
//横向slide幻灯片是否循环滚动
//loopHorizontal: false,
//是否循环滚动,不会出现跳动,效果很平滑
//continuousVertical: true,
//是否使用插件滚动方式,设为false后,会出现浏览器自带的滚动条,将不会按页滚动
//autoScrolling: false,
//是否包含滚动条,设为true,则浏览器自带的滚动条会出现,页面还是按页滚动,但是浏览器滚动条默认行为也有效
//scrollBar: true,
//设置每个section顶部的padding,当我们要设置一个固定在顶部的菜单、导航、元素等时使用
//paddingTop: "100px",
//设置每个section底部的padding,当我们要设置一个固定在底部的菜单、导航、元素等时使用
//paddingBottom: "100px",
//固定的元素,为jquery选择器;可用于顶部导航等
//fixedElements: ".nav",
//是否可以使用键盘方向键导航
//keyboardScrolling: false,
//在移动设置中页面敏感性,最大为100,越大越难滑动
//touchSensitivity: 5,
//设为false,则通过锚链接定位到某个页面不再有动画效果
//animateAnchor: false,
//是否记录历史,可以通过浏览器的前进后退来导航
//recordHistory: true,
//绑定菜单,设定相关属性和anchors的值对应后,菜单可以控制幻灯片滚动
//menu: '.nav',
//是否显示导航,设为true会显示小圆点作为导航
//navigation: true,
//导航小圆点的位置,可以设置为left或者right
//navigationPosition: right,
//鼠标移动到小圆点上时显示出的提示信息
//navigationTooltips: ["第一页","第二页","第三页"],
//是否显示当前页面小圆点导航的提示信息,不需要鼠标移上
//showActiveTooltip: true,
//是否显示横向幻灯片的导航
//slidesNavigation: true,
//横向幻灯片导航的位置,可以为top或者bottom
//slidesNavPosition: bottom,
//内容超过满屏时是否显示滚动条,需要jquery.slimscroll插件
//scrollOverflow: true,
//section选择器
//sectionSelector: ".section",
//slide选择器
//slideSelector: ".slide"
licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
afterLoad: this.afterLoad,
scrollOverflow: true,
navigation: true, //是否显示导航,默认为false
navigationPosition: 'right', //导航小圆点的位置
scrollBar: false,
keyboardScrolling: false, //是否可以使用键盘方向键导航,默认为true
continuousVertical: true, /// 是否循环滚动,默认为false。如果设置为true,则页面会循环滚动,而不像loopTop或loopBottom那样出现跳动,注意这个属性和loopTop、loopBottom不兼容和,不要同时设置
menu: '#menu',
// navigation: true,
// anchors: ['page1', 'page2', 'page3'],
sectionsColor: [
'#41b883',
'#ff5f45',
'#0798ec',
'#fec401',
'#1bcee6',
'#ee1a59',
'#2c3e4f',
'#ba5be9',
'#b4b8ab'
]
}
};

vue 调用 fullpapge 的方法

this.$refs.fullpage.api.moveSectionDown();
this.$refs.fullpage.init(); // 向上滚动一页
// moveSectionUp();
//向下滚动一页
// moveSectionDown();
//滚动到第几页,第几个幻灯片;页面从1计算,幻灯片从0计算
// moveTo(wection,slide);
//和moveTo一样,但是没有动画效果
// silentMoveTo(section,slide);
//幻灯片向右滚动
// moveSlideRight();
//幻灯片向左滚动
// moveSlideLeft();
//动态设置autoScrolling配置项
// setAutoScrolling(boolean);
//动态设置lockAnchors配置项
// setLockAnchors(boolean);
//动态设置recordHistory配置项
// setRecordHistory(boolean);
//动态设置scrollingSpeed配置项
// setScrollingSpeed(milliseconds);
//添加或删除鼠标/滑动控制,第一个参数为启用、禁用;第二个参数为方向,取值包含all、up、dowm、left、right,可以使用多个,逗号分隔
// setAllowScrolling(boolean,[directions]);
//销毁fullpage特效,不写type,fullpage给页面添加的样式和html元素还在;如果使用all,则样式和html等全部被销毁
// destroy(type);
//重新更新页面和尺寸,用于通过ajax请求后改变了页面结构之后,重建效果
// reBuild();

完整代码

<template>
<div>
<full-page :options="options" id="fullpage" ref="fullpage">
<div class="section">
<h3>vue-fullpage.js</h3>
</div>
<div class="section">
<div class="slide">
<h3>Slide 2.1</h3>
</div>
<div class="slide">
<h3>Slide 2.2</h3>
</div>
<div class="slide">
<h3>Slide 2.3</h3>
</div>
</div>
<div class="section">
<h3>Section 3</h3>
</div>
</full-page>
</div>
</template> <script>
import { VueExtend } from 'godspen-lib'; export default {
mixins: [VueExtend.mixin],
name: 'VueFullPage',
label: process.env.LABEL,
style: process.env.STYLE,
data() {
return {
options: {
licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
afterLoad: this.afterLoad,
navigation: true,
anchors: ['page1', 'page2', 'page3'],
sectionsColor: [
'#41b883',
'#ff5f45',
'#0798ec',
'#fec401',
'#1bcee6',
'#ee1a59',
'#2c3e4f',
'#ba5be9',
'#b4b8ab'
]
}
};
},
methods: {
afterLoad: function(origin, destination, direction) {
console.log('After load....');
console.log(destination);
}
}
};
</script> <style lang="stylus" rel="stylesheet/stylus" type="text/stylus" scoped>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
padding: 0;
margin: 0;
} a {
text-decoration: none;
} table {
border-spacing: 0;
} fieldset, img {
border: 0;
} address, caption, cite, code, dfn, em, strong, th, var {
font-weight: normal;
font-style: normal;
} strong {
font-weight: bold;
} ol, ul {
list-style: none;
margin: 0;
padding: 0;
} caption, th {
text-align: left;
} h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 100%;
margin: 0;
padding: 0;
} q:before, q:after {
content: '';
} abbr, acronym {
border: 0;
} * {
-webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
-moz-box-sizing: border-box; /* <=28 */
box-sizing: border-box;
} /* Custom
* --------------------------------------- */
body {
font-family: arial, helvetica;
} .section {
position: relative;
text-align: center;
} #section-1 h2 {
color: #fff;
font-size: 10em;
font-weight: 900;
} #section-1 h1 {
font-size: 2em;
font-weight: 100;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
margin: 1.5em auto 1em auto;
color: #35495e;
padding-right: 30px;
padding-left: 30px;
} #section-1 li {
display: inline-block;
margin: 1.25em 0.3em;
} .section-1-button {
padding: 0.93em 1.87em;
background: #35495e;
border-radius: 5px;
display: block;
color: #fff;
} h3 {
font-size: 5em;
text-align: center;
color: #fff;
font-weight: bold;
} #logo {
position: fixed;
top: 20px;
left: 20px;
color: #fff;
font-weight: bold;
z-index: 99;
font-size: 1.9em;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
} /* Menu
* --------------------------------------- */
#menu-line {
position: absolute;
bottom: -4px;
left: 0;
width: 159px;
height: 2px;
background: #fff;
} #menu {
position: fixed;
top: 20px;
right: 20px;
z-index: 70;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
letter-spacing: 1px;
font-size: 1.1em;
} #menu li {
display: inline-block;
margin: 10px 0px;
position: relative;
} #menu a {
color: #fff;
padding: 0 1.1em 1.1em 1.1em;
} #menu li.active a:after {
content: '';
margin: 0 1.1em 0 1.1em;
height: 2px;
background: #fff;
display: block;
position: absolute;
bottom: -6px;
left: 0;
right: 0;
display: block;
} /* Actions buttons
* --------------------------------------- */
.actions {
position: fixed;
bottom: 2%;
margin: 0 auto;
z-index: 99;
left: 0;
right: 0;
text-align: center;
} .actions li {
display: inline-block;
margin: 0.3em 0.3em;
} .actions-button {
padding: 0.73em 1.47em;
background: rgba(53, 73, 94, 0.47);
border-radius: 5px;
display: block;
color: #fff;
cursor: pointer;
} /* Twitter
* --------------------------------------- */
.twitter-share i {
vertical-align: middle;
position: relative;
top: 2px;
display: inline-block;
width: 38px;
height: 14px;
color: white;
top: -4px;
left: -2px;
fill: #fff;
} .twitter-share svg {
height: 40px;
margin-top: -10px;
} .view-github {
position: fixed;
top: 20px;
left: 20px;
z-index: 999;
padding: 0.93em 1.87em;
background: #35495e;
border-radius: 5px;
display: block;
color: #fff;
}
</style>

doc

vue 中使用 vue-fullpage的更多相关文章

  1. Vue中通过Vue.extend动态创建实例

    Vue中通过Vue.extend动态创建实例 在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点击按钮显示一个对话框或者弹出一条信息.我们通常会提前写好这个组件,然后通过v-if = ...

  2. Vue 中的Vue Router一级路由,二级路由,三级路由以及跳转

    今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...

  3. Vue中使用Vue.component定义两个全局组件,用单标签应用组件时,只显示一个组件的问题和 $emit的使用。

    解决方法: 定义了两个 Vue.component 在 el 中使用的时候要用 双标签, 用单表标签的时候,只会显示第个 组件间 这样写只显示 welcome-button 组件 <welcom ...

  4. vue中使用定时器时this指向问题

    在写一个很小的demo时,用的普通函数写法,没有用es6箭头函数,发现this变化了,后来查找到了问题所在: 箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue 普通函数中的 ...

  5. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  6. 聊聊 Vue 中 provide/inject 的应用

    众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...

  7. vue中使用定时器时this指向

    箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue; 普通函数中的this指向是变化的(使用函数时的指向),谁调用的指向谁.   箭头函数: let timerOne = s ...

  8. 在django中部署vue项目,不单独抽离dist文件

    1,在django项目下(app所在目录),新建vue项目,使用脚手架构建vue项目,vue create (项目名) 2,构建好以后,配置django: (1),配置settings: · 修改te ...

  9. Vue中使用fullpage.js

    Vue中使用fullpage.js:https://blog.csdn.net/weixin_34184158/article/details/88672739

  10. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

随机推荐

  1. mysql 权限管理 grant revoke

    grant all privileges  on  database.table to 'user'@'ip' identified by 'passwd' with grant  option; g ...

  2. Python最新暴力破解WiFi,攻破所有密码限制,最强破解!

    暴力破解wifi密码 这个代码也是非常简单,这里需要用Python中的pywifi这个库,所以需要在DOS命令下安装这个库,同样使用pip install pywifi,很简单就安装成功了,我用的是P ...

  3. 吴裕雄--天生自然java开发常用类库学习笔记:排序及重复元素说明

    import java.util.Set ; import java.util.HashSet ; class Person{ private String name ; private int ag ...

  4. pacificrack 控制面板登录不上的问题

    我今天又试了一下: https://master-stack01.pacificrack.com还是登不上(这个一键烦恼了我一个星期了,但是我今天百度出来了解决办法) 然后用这个就可以了  https ...

  5. 用Git从本地上传文件到GitHub

    这几天忙于抢救崩掉的博客,没空更新GitHub上PAT的代码,手动一个个传太慢了,所以我去偷学了一下给Git传文件到GitHub,非教学教程没有图文,有几个前提 你得有github账号,没有就去注册吧 ...

  6. pt-query-digest使用详解

    1.语法及重要选项pt-query-digest [OPTIONS] [FILES] [DSN] --create-review-table 当使用--review参数把分析结果输出到表中时,如果没有 ...

  7. 中文文本分类之CharCNN

    文本分类是自然语言处理中一个非常经典的任务,可用的模型非常多,相关的开源代码也非常多了.这篇博客用一个CNN模型,对新闻文本进行分类. 全部代码有4个模块:1.数据处理模块(命名为:cnews_loa ...

  8. hibernate字段值无法保存

    通过hibernate对Blogstorage对象进行保存操作,filepath属性的值无论设置多少遍都保存不进去 后来发现是 Blogstorage.hbm.xml 里面根本没有配置filepath ...

  9. Django 模板渲染

    模板语言 {{ 变量 }} {% 逻辑 %} {{ 变量 }} {{ 变量 }}中的点号 用于取出字典/列表等类型数据的值 {{ list.2 }} 获取列表list中索引为2的值 {{ dict.n ...

  10. jQuery原理系列-css选择器实现

    jQuery最强大的功能在于它可以通过css选择器查找元素,它的源码中有一半是sizzle css选择器引擎的代码,在html5规范出来之后,增加了document.querySelector和doc ...