基于vue的fullpage.js使用方法，供大家參考，具體內(nèi)容如下

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),東昌府企業(yè)網(wǎng)站建設(shè),東昌府品牌網(wǎng)站建設(shè),網(wǎng)站定制,東昌府網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,東昌府網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

功能概述

可實(shí)現(xiàn)移動(dòng)端的單頁滾動(dòng)效果，支持橫向滾動(dòng)和縱向滾動(dòng)

兼容性

目前還未進(jìn)行大規(guī)模兼容性測(cè)試。有bug請(qǐng)?zhí)釂栔羒ssues

安裝

npm install vue-fullpage --save

commonjs

import VueFullpage from 'vue-fullpage'
Vue.use(VueFullpage)

或

var vueFullpage = require('vue-fullpage')
Vue.use(vueFullpage)

文檔

api文檔

快速上手

main.js

在main.js需要引入該插件的css和js文件

import VueFullpage from 'vue-fullpage'
Vue.use(VueFullpage)

app.vue

模板部分：在 page-container 容器加入 v-cover 指令防止閃爍 在 page-wp 容器上加 v-page指令，指令值是 fullpage 的配置

 

 

  

  vue-fullpage
  
 
 

  

  vue-fullpage
  
 
 

  

  vue-fullpage
  
 
 

  

  vue-fullpage
  
 
 

js部分：提供 vue-fullpage 的自定義指令

css部分： page-container 需要固定寬度和高度， fullpage 會(huì)使用父元素的寬度和高度。

如下設(shè)置可使?jié)L動(dòng)頁面充滿全屏

demo

地址：

請(qǐng)使用chrome的手機(jī)模擬器或手機(jī)瀏覽器訪問

http://vue.wendaosanshou.top/vue_fullpage_demo/

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。