当前位置： 移动技术网 > IT编程>网页制作>CSS > Vue2返回顶部组件使用分析（附代码）

Vue2返回顶部组件使用分析（附代码）

2018年09月29日  | 移动技术网IT编程  | 我要评论

阜南县人民政府网,传动dnf终极版白色死神,伊人美丝

页面滚离顶部一定距离的时候显示返回顶部图标，点击图片一定的速度返回顶部。

\

文件路径：src\components\public\gotop.vue

<template>
    <p id="gotop">
      <p class="gotop" v-show="gotopshow" @click="gotop"><i class="gotopicon"></i></p>
    </p>
</template>
 
<script>
    export default {
      name: "gotop",
      data(){
          return{
            scrolltop: '',
            gotopshow:false,
          }
        },
      methods:{
        handlescroll () {
          this.scrolltop = window.pageyoffset || document.documentelement.scrolltop || document.body.scrolltop
          if(this.scrolltop>500){
            this.gotopshow=true
          }
        },
        gotop(){
          let timer=null,_that=this;
          cancelanimationframe(timer)
          timer=requestanimationframe(function fn(){
            if(_that.scrolltop>0){
              _that.scrolltop-=50;
              document.body.scrolltop = document.documentelement.scrolltop = _that.scrolltop;
              timer=requestanimationframe(fn)
            }else {
              cancelanimationframe(timer);
              _that.gotopshow=false;
            }
          })
        }
      },
      mounted() {
        window.addeventlistener('scroll', this.handlescroll);
      },
      destroyed(){
        window.removeeventlistener('scroll', this.handlescroll)
      }
    }
</script>
 
<style scoped>
  .gotop{
    position: fixed;
    right: 20px;
    bottom: 50px;
    width: 50px;
    height: 50px;
    background:rgba(0,0,0,.65);
  }
  .gotop:hover{
    background:rgba(0,0,0,.85);
  }
  .gotopicon{
    display: block;
    width: 50px;
    height: 50px;
    background-image: url("data:image/png;base64,ivborw0kggoaaaansuheugaaacaaaaagcayaaabzenr0aaabauleqvryr+2w7u3dqbbe31qajaqdukjsaxqa6qaqacqadggvbcoakoaocbwedgatzechyex8ayqqvd/p59t3s7tjiz2h9pyfawbq4h8ryptq0mefseqlgo0hycvp1hwim4dtoxachadzrhcdagxfazdaffm74elsbvslwgpypgmi4uxsqmc2taygrqcsrnesqov1vcu5baasnn8dwpyyeaiejyukg1fbhfcqb00ggimqjh+rfi2xddtx+6omeewamhxghfgajqw5r/yhhcuint6xe6a6lgspfcxktszve1gcvqmibbchjicxpgwtmiyq0tohxkukae7dlebinhhzrg31m0nvowgxybnvvocui5wzjgjarc4tnwbsnwm3qdg0kt4dswfe9b5vah0crqszu9gawhyt1x3oaepjss+3ltyfigzz/lxyzdri+zgsnim1fkd3z0vjgdqnakmromhtq7vugwagbqyfvgcufkahukyywwaaaabjru5erkjggg==");
    background-repeat: no-repeat;
    background-position: center center;
  }
</style>

引用方式以及文件路径：src\components\show.vue

<template>
  <p id="show">
   
     
    <v-gotop></v-gotop>
 
  </p>
</template>
<script>
 
 
  <strong>import </strong>gotop <strong>from </strong>"./public/gotop";
  <strong>export default </strong>{
    data() {
      <strong>return </strong>{
        data: []
 
      }
    },
    components:{
      'v-gotop': gotop
    },
    methods: {
      
    }
  }
</script>
 
<style scoped>
   
</style>

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网