vue全屏滾動——vue-fullpage.js教程
阿新 • • 發佈：2020-12-14
技術標籤：Vuevue-fullpage.js全屏滾動幻燈片
vue-fullpage.js 用於建立類似幻燈片的全屏滾動效果。
官網地址https://github.com/alvarotrigo/vue-fullpage.js
Demo演示https://www.dowebok.com/demo/2014/77/
程式碼線上除錯 https://codepen.io/alvarotrigo/pen/zpQmwq?editors=1000
目錄
1. 安裝
npm install --save vue-fullpage.js2. 配置
main.js中
// 全屏滾動 vue-fullpage.js
import 'fullpage.js/vendors/scrolloverflow';
import VueFullpage from 'vue-fullpage.js'
Vue.use(VueFullpage)public/index.html 中的<head></head>標籤內
<!--全屏滾動外掛-vue-fullpage.js的樣式--> <link rel="stylesheet" type="text/css" href="https://unpkg.com/fullpage.js/dist/fullpage.min.css">
3. 使用
.vue檔案中，每個 <div class="section"></div> 為一頁，其中的<div class="slide"></div>為橫向子頁
<template> <div> <full-page :options="options" 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>
options 配置
<script>
export default {
data() {
return {
options: {
licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
//是否顯示導航，預設為false
navigation: true,
//為每個section設定背景色
sectionsColor: [
"#41b883",
"#ff5f45",
"#0798ec",
"#fec401",
"#1bcee6",
"#ee1a59",
"#2c3e4f",
"#ba5be9",
"#b4b8ab"
],
}
}
}
}
</script>其他options 配置
//導航小圓點的位置，left或者right,預設為right
navigationPosition: 'left',
//是否可以使用鍵盤方向鍵導航（上下鍵翻頁），預設為true
keyboardScrolling: true,
//是否顯示兩側的箭頭
controlArrows: false,
//每一頁幻燈片的內容是否垂直居中，預設為true
verticalCentered: true,
//字型是否隨著視窗縮放而縮放 預設為true
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",
//在移動設定中頁面敏感性，最大為100，越大越難滑動
touchSensitivity: 5,
//設為false，則通過錨鏈接定位到某個頁面不再有動畫效果
animateAnchor: false,
//是否記錄歷史，可以通過瀏覽器的前進後退來導航
recordHistory: true,
//繫結選單，設定相關屬性和anchors的值對應後，選單可以控制幻燈片滾動
menu: '.nav',
// 滑鼠移動到小圓點上時顯示出的提示資訊
navigationTooltips: ["第一頁","第二頁","第三頁"],
// 是否顯示當前頁面小圓點導航的提示資訊，不需要滑鼠移上
showActiveTooltip: true,
// 是否顯示橫向幻燈片的導航
slidesNavigation: true,
// 橫向幻燈片導航的位置，可以為top或者bottom
slidesNavPosition: 'bottom',
// 內容超過滿屏時是否顯示滾動條，需要jquery.slimscroll外掛
scrollOverflow: true,
// section選擇器
sectionSelector: ".section",
// slide選擇器
slideSelector: ".slide"4. 呼叫 API
// 向下滾動一頁
this.$refs.fullpage.api.moveSectionDown();其他 API
// 向上滾動一頁
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" ref="fullpage">
<div class="section">
<div style="text-align: center">
<h1 style="color: white">小米手機拍照效果</h1>
<button @click="next">下一頁</button>
</div>
</div>
<div class="section">
<div class="slide">
<div style="height: 100vh">
<img width="100%"
src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/redminote9pro/section14-8.jpg"
alt="">
</div>
</div>
<div class="slide">
<div style="height: 100vh">
<img width="100%"
src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/redminote9pro/section14-6.jpg"
alt="">
</div>
</div>
<div class="slide">
<div style="height: 100vh">
<img width="100%"
src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/redminote9pro/section16-2.jpg"
alt="">
</div>
</div>
</div>
<div class="section">
<div class="box3">
<div style="height: 100vh">
<img height="100%"
src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/redminote9pro/section11-1.jpg"
alt="">
</div>
</div>
</div>
</full-page>
<div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
options: {
licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
//是否顯示導航，預設為false
navigation: true,
//為每個section設定背景色
sectionsColor: [
"#41b883",
"#ff5f45",
"#0798ec",
"#fec401",
"#1bcee6",
"#ee1a59",
"#2c3e4f",
"#ba5be9",
"#b4b8ab"
],
}
}
},
methods: {
next() {
// 向下滾動一頁
this.$refs.fullpage.api.moveSectionDown();
}
}
}
</script>