zoukankan      html  css  js  c++  java
  • 滚动翻页vue

    <template>
    <div class="home">
    <div style="height:100%; 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>

  • 相关阅读:
    今天开始记录我所经历
    第一次作业
    OJ练习
    svn 有效代码统计
    关于TDD的思考
    BFS
    001 Phone Numbers
    使用statsvn统计svn中的代码量
    ContinueWhenAll 实现线程的多重依赖
    小组计划
  • 原文地址:https://www.cnblogs.com/JamyWong/p/11982702.html
Copyright © 2011-2022 走看看