快捷導(dǎo)航

vue+vue-fullpage實(shí)現(xiàn)整屏滾動(dòng)頁(yè)面的示例代碼(直播平臺(tái)源碼)

更新時(shí)間：2022年06月30日 14:37:52 作者：云豹科技-蘇凌霄

這篇文章主要介紹了vue+vue-fullpage實(shí)現(xiàn)整屏滾動(dòng)頁(yè)面,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、man.js引入

// An highlighted block
import router from './router'
Vue.config.productionTip = false
// 整屏滾動(dòng)
import 'fullpage.js/vendors/scrolloverflow';
import VueFullPage from 'vue-fullpage.js';
Vue.use(VueFullPage)
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

二、使用

1.html，

<template>
 <div>
  <full-page :options="options" id="fullpage" ref="fullpage">
   <div >
    <h3>vue-fullpage.js</h3>
   </div>
   <div >
    <div >
     <h3>Slide 2.1</h3>
    </div>
    <div >
     <h3>Slide 2.2</h3>
    </div>
    <div >
     <h3>Slide 2.3</h3>
    </div>
   </div>
   <div >
    <h3>Section 3</h3>
   </div>
  </full-page>
 </div>
</template>

2.js

export default {
 data() {
  return {
   options: {
    anchors: ["page1", "page2", "page3", "page4", "page5", "page6"],
    licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
    afterLoad: this.afterLoad, // method中的方法 即回調(diào)函數(shù)
    scrollOverflow: true,
    scrollBar: false,
    menu: "#menu",
    sectionsColor: [
     "#23A84A",
     "#ff5f45",
     "#0798ec",
     "#fec401",
     "#000000",
     "#E7EFFE",
    ],
   },
  };
 },
}

三、常用API

1.afterLoad:對(duì)應(yīng)的函數(shù)寫(xiě)在methods中，常用作對(duì)頁(yè)面的處理

methods:{
afterLoad: function (origin, destination, direction) {
    // origin 起點(diǎn) destination終點(diǎn) direction方向 固定寫(xiě)法
   this.navIndex = destination.index;
   //destination.index代表對(duì)應(yīng)頁(yè)面index(從0開(kāi)始)
   //拿到對(duì)應(yīng)頁(yè)面的index就可以進(jìn)行操作
   if (destination.index > 0) {
    this.phoneShow = true;
   }
   if (destination.index === 0) {
    this.phoneShow = false;
   }
  },
}

2.moveTo通過(guò)事件跳轉(zhuǎn)到對(duì)應(yīng)的page頁(yè)面

 options: {
    afterLoad: this.afterLoad,
    //一定要在options中插入這段數(shù)組，數(shù)組的值對(duì)應(yīng)page頁(yè)面
    anchors: ["page1", "page2", "page3", "page4", "page5", "page6"],
    licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
    afterLoad: this.afterLoad, // method中的方法 即回調(diào)函數(shù)
    scrollOverflow: true,
    scrollBar: false,
    menu: "#menu",
    sectionsColor: [
     "#23A84A",
     "#ff5f45",
     "#0798ec",
     "#fec401",
     "#000000",
     "#E7EFFE",
    ],
   },
moveTo(pages) {
//固定寫(xiě)法,第一個(gè)參數(shù)代表options中anchors數(shù)組中的值
//在點(diǎn)擊時(shí)傳遞對(duì)應(yīng)的pages值即可
   fullpage_api.moveTo(pages, 1);
  },

到此這篇關(guān)于vue+vue-fullpage實(shí)現(xiàn)整屏滾動(dòng)頁(yè)面的文章就介紹到這了,更多相關(guān)vue整屏滾動(dòng)頁(yè)面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: