滚动翻页vue

<template>
<div class="home">
<div style="height:100%; width:100%;" @wheel.prevent="handleScroll">
<div class="hometitle">
<div v-for="navItem in navList" :key="navItem.name">
<router-link :to="{name: navItem.name}">
{{ navItem.title }}
</router-link>
</div>
</div>
<transition>
<router-view></router-view>
</transition>
</div>
</div>
</template>

<script>
export default {
data() {
return {
navList: [
{
title: 'Page A',
name: 'pageA',
},
{
title: 'Page B',
name: 'pageB',
},
{
title: 'Page C',
name: 'pageC',
}
]
};
},
computed: {
},
methods: {
getCurrentNavIndex() {
for (let i = 0; i < this.navList.length; i++) {
if (this.navList[i].name === this.$route.name) {
return i;
}
}
return 0;
},
handleScroll(e) {
let index = this.getCurrentNavIndex();
index = index + (e.deltaY > 0 ? -1 : 1);
index = (index + 3) % 3;
this.$router.push({name: this.navList[index].name});
}
}
};
</script>