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

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

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

API document
  Quick up hand  

Main.js
CSS and JS files


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

app.Vue
  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

Vue-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%;}

    Demo  
Address:
Use Chrome’s mobile emulator or mobile browser to access

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

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
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment