Vue-based FullPage.js single page scroll plugin

Based on Vue-based FullPage.js How to use, for your reference, the specific content is as follows

can realize a single page scroll effect of the mobile end Support lateral scrolling and longitudinal scroll

There is currently no large-scale compatibility testing. If you have bug, please ask questions

NPM Install Vue-Fullpage –save

Import VuefullPage from ‘Vue-FullPage’Vue.use (Vuefullpage)

  VAR VuefullPage = Require ('Vue-Fullpage') Vue.use (Vuefullpage)  

API document
  Quick up hand  

CSS and JS files

Import VueFullPage from ‘Vue-FullPage’Vue. Use (vuefullpage)

  Template section: Add V-COVER in the Page-Container container to prevent flashing on the Page-WP container, the command value is the configuration of FullPage  


  VUE -FullPage 

JS part: provides Vue- FullPage Custom Directive

Export Default {Data () {Return {OPTS: {Start: 0, Dir: 'V', Loop: False, Duration : 500, Stoppagescroll: True, BeforeChange: Function (Prev, Next) {}, afterchange: function (prev, next) {}}}}}

CSS section: Page-container requires fixed width and height, and FullPage uses the width and height of the parent element.
The following settings can make the scroll page full screen

.page-container {Position: Absolute; Left: 0; Top: 0; Width: 100%; Height: 100%;}

Use Chrome’s mobile emulator or mobile browser to access

This article has been organized to the “Vue.js Front End Component Learning Tutorial”, you are welcome to learn to read.

With regard to the tutorial of the Vue.js component, please click on the Topic Vue.js Component Learning Tutorial for learning.
 The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.                      
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment