vue利用tween.js使页面进行滚动效果_MVC前端网(menVScode)_前端博客_前端技术

安宇雨 - 随手采集
2018-11-22 18:54:32
随手采集
0000-未整理-等待研究

下载tween.js

npm install tween.js --save

单文件组件1

<template>
    <div class="docCont">
        <dl class="left">
            <dt><router-link :to='{path:"#base"}'>基础</router-link></dt>
            <dd><router-link :to='{path:"#start"}'>开始</router-link></dd>
            <dd><router-link :to='{path:"#dongtai"}'>动态路由</router-link></dd>
            <dd><router-link :to='{path:"#qiantaoluyou"}'>嵌套路由</router-link></dd>
            <dt><router-link :to='{path:"#jinjie"}'>进阶</router-link></dt>
            <dd><router-link :to='{path:"#jinjie1"}'>导航钩子</router-link></dd>
            <dd><router-link :to='{path:"#jinjie2"}'>路由元信息</router-link></dd>
            <dd><router-link :to='{path:"#jinjie3"}'>过渡动效</router-link></dd>
        </dl>
        <div class="right">
            <docScroll></docScroll>   
        </div>
    </div>
</template>
<script>
    import docScroll from '@/view/backend/doc-scroll'
    import TWEEN from 'tween.js'
    export default {
        data(){
            return {}
        },
        components:{
            docScroll
        },
        beforeRouteEnter(to,from,next){//路由进来的时候
            next((vm)=>{
                vm.animate(to) 
           })
        },
        beforeRouteUpdate(to,from,next){//更新路由的时候,也可以用watch来监听route
            // console.log(to.hash)
            this.animate(to)
            next()
        },
        methods:{
            animate(to){
                function animateFunc(time){ //如果time没有被指定，将使用当前时间。
                    requestAnimationFrame(animateFunc)
                    TWEEN.update(time)
                }
                if(to.hash){
                    var el = document.getElementById(to.hash.slice(1))
                    var doc = document.getElementsByClassName('docCont')[0]
                    if(el){
                        animateFunc()
                        new TWEEN.Tween({
                            number:doc.scrollTop //容器的起始位置
                        }).to({
                            number:el.offsetTop //每个区域的位置
                        },500).onUpdate(function(){ //这里不能使用箭头函数，只能使用fn(){},由于this指向问题，this指向当前的new TWEEN.Tween实例
                            doc.scrollTop = this.number.toFixed(0)
                            console.log(doc.scrollTop)
                        }).start()
                    }
                }
            }
        }
    }
</script>
<style>
    .docCont{ line-height: 24px;position: fixed;top: 120px;left: 0px;overflow-y: scroll;right: 0;bottom: 0;z-index: 1; }
    .docCont dd{ padding-left: 20px;font-size:13px; }
    .docCont .left{ position: fixed;top: 110px;left: 20px; width: 140px; }
    .docCont .right{argin-left: 150px;
</style>

单文件组件2

<template>
  <div class='docRight'>
    <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;}
    .docRight div{height: 500px;}
    .docRight{/* position: relative; */}
</style>

效果展示

GIFeee