vue页面中添加滚动事件实现回到顶部的按钮的显示或隐藏

data中存放的数据

data() {
    return {
      scrollTopNum: "",//页面滚动的高度
      tabshow: false,//是否进行某种操作
    };
  },

在mounted中添加滚动事件

 mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },

获取页面的高度

methods: {
    handleScroll() {
      let top =
        document.documentElement.scrollTop ||document.body.scrollTop ||window.pageYOffset;
      this.scrollTopNum = top;
    }
   }

在watch中监听滚动的距离

watch: {
    scrollTopNum: function () {
      if (this.scrollTopNum > 50) {
        this.tabshow = true;
      } else {
        this.tabshow = false;
      }
    },
  },

引入iview中的图标

<Icon type="ios-arrow-down" size="50" color="#fff" @click="backTop()" v-show="tabshow"/>

methods中添加回到顶部的事件

backTop(){
      const goToTop = () => window.scrollTo(0, 0);
      goToTop()
    },