關於Vue中，fullpage全屏滾動插件的使用方法

一、 安裝插件

 

npm install --save vue-fullpage.js

 

 

 

 

二、 全局導入，在main.js中

import 'fullpage.js/vendors/scrolloverflow'

import VueFullPage from 'vue-fullpage.js/dist/vue-fullpage.js'

Vue.use(VueFullPage)

 

三、 在頁面中使用

fullpage(:options="options", ref="fullpage")
    .sections
        // 第一頁
        .section
        // 第二頁
        .section
        // 第三頁
        .section

 

其中options為fullpage的配置項，在data中聲明

options: {
        licenseKey: null,
        afterLoad: this.afterLoad,
        controlArrows: true
      }

其中afterLoad為滾動某一頁后的回調函數，可在其中定義一些操作

afterLoad (anchors, item) {
    }

 常用配置項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'
        ]
      }
    }

 

還可以通過this.$refs.fullpage.api 來調用插件的api

this.$refs.fullpage.init()
this.$refs.fullpage.api.setAllowScrolling(false)

常用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();

 

參考文章：https://www.cnblogs.com/mybilibili/p/12263820.html