vue-router—16滚动动画

Myth丶恋晨 2022-01-16 07:07 242阅读 0赞

需求

看下面，当我点击左侧的时候，右侧就会定位到某一块，看一下要怎么做

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

docl.vue

首先要对应好各自的hash值

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

看一下完整的代码

doc.vue

<template>
      <div class="doc">
        <div class="doc-nav">
          <ul class="main-menu">
            <li>
              <router-link :to="{path:'#base'}">基础</router-link>
              <ul class="nav-dropdown">
                <li>
                  <router-link :to="{path:'#start'}">开始</router-link>
                </li>
                <li>
                  <router-link :to="{path:'#dongtai'}">动态路由</router-link>
                </li>
                <li>
                  <router-link :to="{path:'#qiantaoluyou'}">嵌套路由</router-link>
                </li>
              </ul>
            </li>
            <li>
              <router-link :to="{path:'#jinjie'}">进阶</router-link>
              <ul class="nav-dropdown">
                <li>
                  <router-link :to="{path:'#jinjie1'}">导航钩子</router-link>
                </li>
                <li>
                  <router-link :to="{path:'#jinjie2'}">路由元信息</router-link>
                </li>
                <li>
                  <router-link :to="{path:'#jinjie3'}">过渡动效</router-link>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="doc-view">
          <doc-view></doc-view>
        </div>
      </div>
    </template>
    
    <script>
      import DocView from '@/views/backend/doc-view'
      import TWEEN from 'tween.js'
    
      export default {
        components: {
          DocView
        },
        beforeRouteEnter(to, from, next){
          next((vm) => {
            vm.animate(to)
          })
        },
        beforeRouteUpdate(to, from, next){
          this.animate(to)
          next();
        },
        methods: {
            animate(to){
    
                function animateFunc(time){
                    requestAnimationFrame(animateFunc)
                    TWEEN.update(time)
                }
    
                if( to.hash ){
                    var el = document.getElementById(to.hash.slice(1))
                    var doc = document.getElementsByClassName("doc")[0];
    
                    if( el ){
                      animateFunc()
                        new TWEEN.Tween({
                          number: doc.scrollTop
                        })
                          .to({
                            number: el.offsetTop
                          }, 500)
                          .onUpdate(function(){
                              doc.scrollTop = this.number.toFixed(0)
                          })
                          .start()
                    }
                }
    
            }
        }
      }
    </script>
    <style>
    
    </style>

doc-view.vue

<template>
      <div class='doc-right'>
        <h2>
        <a href="#base" id='base'>基础 </a>
        </h2>
        <hr/>
        <h3>
          <a  id="start" href="#start">开始</a>
        </h3>
        <div>
          开始相关的内容
        </div>
        <h3>
          <a id="dongtai" href="#dongtai">动态路由</a>
        </h3>
        <div>
          动态路由相关的内容
        </div>
        <h3>
          <a id="qiantaoluyou" href="#qiantaoluyou">嵌套路由</a>
        </h3>
        <div>
          嵌套路由相关的内容
        </div>
        <h2>
          <a href="#jinjie"  id='jinjie'>进阶</a>
        </h2>
        <hr/>
        <h3>
          <a  id="jinjie1" href="#jinjie1">导航钩子</a>
        </h3>
        <div>
         导航钩子相关的内容
        </div>
        <h3>
          <a  id="jinjie2" href="#jinjie2">路由元信息</a>
        </h3>
        <div>
          路由元信息相关的内容
        </div>
        <h3>
          <a  id="jinjie3" href="#jinjie3">过渡动效</a>
        </h3>
        <div>
         过渡动效相关的内容
        </div>
      </div>
    </template>
    
    <script>
      export default {
        name: 'search',
        data () {
          return {}
        }
      }
    </script>
    <style>
    .doc-right div{
      height: 500px;
    }
    h3 {
      margin-top: 20px;  
    }
    h2 a,h3 a {
      padding-top: 10px;
      position: relative;
    }
    </style>

看一下重点的代码

这块用了 一个插件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220114/6575a01b2e4d4164af3857595484bc8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220114/ec1d4ed2a2524d32aaf5297d19cc4ca2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20220114/ff513de234134d598f858f24f94e51de.png