返回顶部组件的步骤

有两种写法一种是原生的还有一种可以用this.$refs.home

第一种：

1.首先需要写点击返回顶部的div

代码如下（示例）：

<span class="hui" v-show="huiShow" @click="huiTop">回到顶部</span>

2.页面载入时和页面销毁时的监听事件

 mounted() {  //页面加载时添加监听事件
    this.ele = document.querySelector('.home') //获取节点
    this.ele.addEventListener('scroll',this.handlerscroll) //绑定监听事件
  },
  destroyed(){  //页面销毁时移出监听事件
    this.ele.removeEventListener('scroll',this.handlerscroll) //移出监听事件
  },

3.在mothods中写点击回到顶部和控制显示隐藏的事件

 methods:{   
    handlerscroll() { //点击显示隐藏
    //Math.ceil取整数的意思
      if(Math.ceil(this.ele.scrollTop) >= 100) {  
        this.huiShow = true
      } else {
        this.huiShow = false 
      }
    },
    huiTop() { //点击回到顶部
      this.ele.scroll({	
        top:0, //距离顶部为0
        behavior:'smooth' //缓慢的回到最上边表示状态
      })
    }
    
  }

第二种：
1.先在home的div上添加ref=“home”

 <div class="home" ref="home">

2.在下边的代码中可以
this.ele 替换成this.$refs.home也可以获取.home

最后

以上就是自信吐司为你收集整理的返回顶部组件的实现返回顶部组件的步骤的全部内容，希望文章能够帮你解决返回顶部组件的实现返回顶部组件的步骤所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。