安裝並使用
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: {
// 為每個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
