A component that provides full page scrolling for vue-router.
日本語: README_ja.md
This demo uses vue-touch-events to detect swipe events.
npm install @yosichikaw/vue-fullpage-scroll
import Vue from 'vue';
import VueFullpageScroll from "@yosichikaw/vue-fullpage-scroll";
Vue.use(VueFullpageScroll);
App.vue
<template>
<div>
<vue-fullpage-scroll />
</div>
</template>
The next page appears from the direction specified by the direction
property when a page transition is performed by router-link
or $router.push
.
If you want to specify the direction, fire the fullpage-scroll
event from a page in vue-router.
Pass null
to direction
for normal page transitions.
$emit('fullpage-scroll', {direction, to});
direction
: One of'left', 'right', 'top', 'bottom', null
to
: An object specified byrouter-link
SomePage.vue
<template>
<div>
<button @click="handler">From above</button>
</div>
</template>
<script>
export default {
methods: {
handler() {
this.$emit("fullpage-scroll", {
direction: 'bottom',
to: { name: "nextPage" }
});
},
}
}
</script>
Property | Type | Default | Description |
---|---|---|---|
direction | String | left |
Scroll direction (the current page exits). ('left', 'right', 'top', 'bottom', null ) |
mode | String | ease |
Mode of Transition |
duration | Number | 1 |
Transition time in seconds |