fullpage. js single page scrolling plug in based on vue

The usage of fullpage. js based on vue is for your reference. The specific contents are as follows

Functional overview

It can realize the single page scrolling effect at the mobile end, and support horizontal scrolling and vertical scrolling

Compatibility

At present, no large-scale compatibility test has been conducted. If you have bug, please ask questions to issues

Installation

npm install vue-fullpage --save

commonjs

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

Or

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

Document

api Documentation

Get started quickly

main.js

css and js files for the plug-in need to be introduced in main. js

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

app.vue

Template: Add v-cover instruction to page-container container to prevent flicker. Add v-page instruction to page-wp container, and the instruction value is the configuration of fullpage

<div class="page-container">
 <div v-page="opts" class="page-wp">
 <div class="page page1">
  <p class="part part1" v-animate="'slideIn'">
  vue-fullpage
  </p>
 </div>
 <div class="page page2">
  <p class="part part2" v-animate="'slideIn'">
  vue-fullpage
  </p>
 </div>
 <div class="page page3">
  <p class="part part3" v-animate="'slideIn'">
  vue-fullpage
  </p>
 </div>
 <div class="page page4">
  <p class="part part4" v-animate="'fadeIn'">
  vue-fullpage
  </p>
 </div>
 </div>
</div>

js section: Provides custom instructions for vue-fullpage

<script>
export default {
 data () {
 return {
  opts: {
  start: 0,
  dir: 'v',
  loop: false,
  duration: 500,
  stopPageScroll: true,
  beforeChange: function (prev, next) {
  },
  afterChange: function (prev, next) {
  }
  }
 }
 }
}
</script>

css section: page-container requires a fixed width and height, while fullpage uses the width and height of the parent element.

The following settings can make the scrolling page full screen

<style>
.page-container {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
}
</style>

demo

Address:

Please use chrome's mobile simulator or mobile browser to access it

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

This article has been sorted into "Vue. js front-end component learning tutorial", welcome everyone to learn and read.

For the vue. js component tutorial, please click on the topic vue. js component learning tutorial to learn.