Hey, how are you? I’m fine

preface

1 introduction

Configuration Item Properties

dir

Opts: {dir: 'v'}Copy the code

duration

Opts: {duration: '500'}Copy the code

der

Opts: {der: '0.1'}Copy the code

Configuration item Event

beforeChange

// Trigger before sliding // return false prevents switching to next page opts: {beforeChange: (prev, next) =>{if(lock) return false}}Copy the code

afterChange

AfterChange: (prev, next) =>{}}Copy the code

Animation configuration

v-animate="{ 
  value: 'bounceInLeft', 
  delay: 0 
}"
Copy the code

Common style styles

fullpage-container

Container {position: relative; fullpage-container {position: relative; width: 100%; height: 100%; overflow: hidden; }Copy the code

2 use

The installation

npm install vue-fullpage  --save
Copy the code

Global configuration

import Vue from 'vue'
import 'vue-fullpage/vue-fullpage.css'
import VueFullpage from 'vue-fullpage'
Vue.use(VueFullpage)
Copy the code

Full screen slide

<template> <div class="BaseFullpage"> <div class="fullpage-wp" v-fullpage="opts"> <div class="page-1 page"> <p class="part-1" v-animate="{ value: 'bounceInLeft' }"> vue-fullpage1 </p> </div> <div class="page-2 page"> <p class="part-2" v-animate="{ value: </p> < el-button@click ="unlock"> </ el-button@click ="unlock">  </div> <div class="page-3 page"> <p class="part-3" v-animate="{ value: 'bounceInLeft', delay: 0 }"> vue-fullpage3 </p> <p class="part-3" v-animate="{ value: 'bounceInRight', delay: 600 }"> vue-fullpage4 </p> <p class="part-3" v-animate="{ value: 'zoomInDown', delay: 1200 }"> vue-fullpage5 </p> </div> </div> </div> </template> <script> import Vue from 'vue' import 'vue-fullpage/vue-fullpage.css' import VueFullpage from 'vue-fullpage' Vue.use(VueFullpage) export default { data() { return { isLock: true, opts: { start: 0, dir: 'v', duration: 500, beforeChange: this.beforeChange, afterChange: this.afterChange } } }, methods: BeforeChange (prev, next) {console.log('before', prev, next) // Default lock if (next === 2 && this.isLock) return false}, beforeChange(prev, next) {console.log('before', prev, next) // Default lock if (next === 2 && this.isLock) return false}, afterChange(prev, next) { console.log('after', prev, next) }, lock() { this.isLock = true }, unlock() { this.isLock = false } } } </script> <style lang="scss" scoped> .fullpage-container { position: absolute; left: 0; top: 0; width: 100%; height: 100%; .page { width: 100%; height: 100%; background: chocolate; } } </style>Copy the code

3. Pay attention to

1. Use v-fullpage to specify the element, which must have a parent, and specify width and height 2. Use RETURN False to disallow sliding to next page. 3. Use V-animate to animate internal elements

The end of the

Moonlight quietly ran into the window, you are also looking at the moon in a daze ~

Good night ^_^

Refer to the link

  • Vue – fullpage API documentation
  • Vue-fullpage official case

Review past

  • Learn a Vue plugin (1) every day — Better scroll
  • Learn a VUE plugin (2) every day — vue-awesome-swiper
  • Learn a vUE plugin every day (3) — esLint + prettier + stylelint
  • Learn a VUE plugin (4) every day — the V-Viewer
  • Learn a vUE plugin (5) every day — PostCSs-pxtorem
  • Learn a Vue plugin every day (6) — Momentjs
  • Learn a Vue plugin (7) every day — HammerJS
  • Learn a vUE plugin (8) — McAnvas every day
  • Learn a VUE plugin (9) — MathJax every day
  • Learn a vUE plugin every day (10) — VUe-aPlayer
  • Learn a vUE plugin every day (11) — vue-drag-resize