vue自定义一个回到顶部组件

1.首先创建一个backTop.vue页面：

页面有两个按钮，一个回到顶部按钮，一个刷新按钮(showRefresh:false将刷新按钮隐藏)，实现效果如下：

代码解析：

domName:需要监听滚动的dom类名，不传默认监听body

showRefresh:是否显示刷新按钮

right:组件定位距离右侧像素，默认距离右侧50px

bottom:组件定位距离底部像素，默认距离底部66px

默认监听dom元素滚动50px(scrollTop>50)后显示回到顶部组件，可自由更加情景设置

代码实现：

<template>
  <div>
    <div class="fixed-button" :style="fixedStyle">
      <div class="refresh-area" @click="refreshData" v-if="showRefresh">
        <i class="refresh"></i>
      </div>
      <div class="arrow-area" @click="backTop">
        <i class="arrowUp"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  //设置需要监听滚动的div名称，默认'',监听body
  props: {
    domName: {
      type: String,
      default: '',
    },
    showRefresh: {
      type: Boolean,
      default: true,
    },
    right: {
      type: Number,
      default: 50,
    },
    bottom: {
      type: Number,
      default: 66,
    },
  },
  data() {
    return {
      fixedStyle: 'display:none;',
      dom: null, //被监听的dom
    }
  },
  mounted() {
    console.log('domName', this.domName)
    if (this.domName != '') {
      this.dom = document.querySelector('.' + this.domName)
      this.dom.addEventListener('scroll', this.scrollToTop)
    } else {
      document.body.addEventListener('scroll', this.scrollToTop)
    }
  },
  destroyed() {
    if (this.domName != '') {
      this.dom.removeEventListener('scroll', this.scrollToTop)
    } else {
      document.body.removeEventListener('scroll', this.scrollToTop)
    }
  },
  methods: {
    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop() {
      const that = this
      let scrollTop = 0
      if (this.domName != '') {
        scrollTop = this.dom.pageYOffset || this.dom.scrollTop
      } else {
        scrollTop = window.pageYOffset || document.body.scrollTop
      }

      that.scrollTop = scrollTop
      if (that.scrollTop > 50) {
        that.fixedStyle = `right:${this.right}px;bottom:${this.bottom}px;`
      } else {
        that.fixedStyle = 'display:none;'
      }
      this.$emit('scrollToTop')
    },
    // 刷新
    refreshData() {
      //   this.$refs.child1Container.refreshDataMoren("");
      this.$emit('refreshData')
    },
    // 回到顶部
    backTop() {
      const that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        if (this.domName != '') {
          this.dom.scrollTop = that.scrollTop + ispeed
        } else {
          document.documentElement.scrollTop = document.body.scrollTop =
            that.scrollTop + ispeed
        }

        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 20)
    },
  },
}
</script>

<style>
.fixed-button {
  position: fixed;
  /* width: 40px; */
  bottom: 66px;
  right: 50px;
  z-index: 999999;
}
.refresh-area {
  color: #20499e;
  cursor: pointer;
  width: 34px;
  height: 34px;
  line-height: 34px;
  background: #ffffff;
  box-shadow: 0px 2px 6px 2px rgba(54, 78, 128, 0.1);
  border-radius: 50%;
  font-size: 16px;
  text-align: center;
}
.arrow-area {
  color: #20499e;
  cursor: pointer;
  width: 34px;
  height: 34px;
  line-height: 34px;
  margin-top: 12px;
  border-radius: 50%;
  text-align: center;
  background: #ffffff;
  box-shadow: 0px 2px 6px 2px rgba(54, 78, 128, 0.1);
  color: #20499e;
}
.refresh-area:hover {
  background: #20499e !important;
}
.arrow-area:hover {
  background: #20499e !important;
}
.refresh-area:hover .refresh {
  background: url('../assets/refreshHover.svg') no-repeat center !important;
}
.arrow-area:hover .arrowUp {
  background: url('../assets/goTopHover.svg') no-repeat center !important;
}
.refresh {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('../assets/refresh.svg') no-repeat center;
  margin-top: 9px;
}
.arrowUp {
  display: inline-block;
  width: 14px;
  height: 16px;
  background: url('../assets/goTop.svg') no-repeat center;
  margin-top: 9px;
}
</style>