Vue-fullpage-plugin NPM

vue-fullpage-plugin

这是一个全屏滑动的Vue组件。

下载安装

// 使用npm
npm install vue-fullpage-plugin

// 使用yarn
yarn add vue-fullpage-plugin

全局注册

// main.js
import VueFullPagePlugin from 'vue-fullpage-plugin'
Vue.use(VueFullPagePlugin);

局部引用

// 导入
import fullPage from 'vue-fullpage-plugin/lib/fullPage'
import fullPageItem from 'vue-fullpage-plugin/lib/fullPageItem'
// 注册
export default {
  name: "",
  components: {
    fullPage,
    fullPageItem
  }
};

Props参数

名称	含义
duration	整屏滑动的过渡时间，单位毫秒

事件

事件名称	事件含义	参数
onPageChange	页面切换事件，必须在`fullPage`组件上监听。	该事件的参数是一个对象。对象属性`currentIndex`代表切换后显示的页面索引，对象属性`lastIndex`代表切换前显示的页面索引。

方法

通过ref可以获取到fullPage实例并调用实例方法。

方法名称	方法含义	参数
nextPage	切换到下一个页面	无
prevPage	切换到上一个页面	无
setPage	切换到指定页面	指定页面对应的索引

代码示例

<template>
  <div id="app">
    <fullPage ref="fullPage" :duration="800" @onPageChange="onPageChange">
      <fullPageItem>
        <div style="background: #8cc; width: 100%; height: 100%;" @click="nextPage"></div>
      </fullPageItem>
      <fullPageItem>
        <div style="background: #c8c; width: 100%; height: 100%;" @click="prevPage"></div>
      </fullPageItem>
    </fullPage>
  </div>
</template>

<script>
import fullPage from 'vue-fullpage-plugin/lib/fullPage'
import fullPageItem from 'vue-fullpage-plugin/lib/fullPageItem'

export default {
  name: "",
  components: {
    fullPage,
    fullPageItem
  },
  methods: {
    onPageChange(e) {
      console.log(e.currentIndex, e.lastIndex)
    },
    nextPage() {
      this.$refs.fullPage.nextPage();
    },
    prevPage() {
      this.$refs.fullPage.prevPage();
    }
  }
};
</script>

<style>
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

@infinitebrahmanuniverse/nolb-vue-f @everything-registry/sub-chunk-3081

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago