每天学习一个vue插件(12)——vue-fullpage

嘿，你好吗？ 我很好

前言

1 介绍

配置项 属性

dir

// 方向 v/h
// 默认v
opts: {
  dir：'v'
}

duration

// 切换页面动画时长
// 默认500ms
opts: {
  duration：'500'
}

der

// 触发事件滑动距离
// 默认0.1
opts: {
  der：'0.1'
}

配置项 事件

beforeChange

// 滑动前触发
// return false 阻止切换到下一页
opts: {
  beforeChange：(prev, next) =>{if(lock) return false}
}

afterChange

// 滑动后触发
opts: {
  afterChange：(prev, next) =>{}
}

动画配置

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

常用样式 style

fullpage-container

// 默认会在指定父级元素加上 .fullpage-container
// 并且指定样式
.fullpage-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

2 使用

安装

npm install vue-fullpage  --save

全局配置

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

全屏滑动

<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: 'bounceInRight' }">
          vue-fullpage2
        </p>
        <el-button @click="lock">锁定</el-button>
        <el-button @click="unlock">解锁</el-button>
      </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)

      // 默认锁定
      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>

3.注意

1.使用 v-fullpage 指定元素，必须有一个父级，并且指定宽高
2.使用 return false 禁止滑动到下一页
3.使用 v-animate 配置内部元素出现动画

尾声

月光悄悄的跑进窗子，你是否也正望着月亮发呆~

晚安 ^_^

参考链接

• vue-fullpage API 文档
• vue-fullpage 官方案例

往期回顾

• 每天学习一个vue插件(1)——better-scroll
• 每天学习一个vue插件(2)——vue-awesome-swiper
• 每天学习一个vue插件(3)——eslint + prettier + stylelint
• 每天学习一个vue插件(4)——v-viewer
• 每天学习一个vue插件(5)——postcss-pxtorem
• 每天学习一个vue插件(6)——momentjs
• 每天学习一个vue插件(7)——hammerjs
• 每天学习一个vue插件(8)——mcanvas
• 每天学习一个vue插件(9)——MathJax
• 每天学习一个vue插件(10)——Vue-APlayer
• 每天学习一个vue插件(11)——vue-drag-resize