vue回到顶部,vuerify组件可用

之前踩了一个大坑,总结的第一个方法会影响vuetify组件中的视差,就连在苹果手机打开网页也无法滚动查看网页了,滑一下动一下,从大神那里整理了另外一个方式,没有冲突,非常感谢大牛
我的环境:

  1. vue-cli搭建的脚手架
  2. 有多个页面,靠切换路由来切换页面,下面的内容放到App.vue中即可
  3. 使用vuetify组件

整理来源 https://blog.csdn.net/u010214074/article/details/78751875

<template>
  <v-container>
    <v-layout>
      <v-flex>
        <v-card height="10000px">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum odit maiores vel necessitatibus voluptatum libero et aspernatur labore sapiente nesciunt! Molestiae id ad, quos harum nemo unde laudantium repellat eius.</p>
          <v-btn
            v-show="backTopShow" @click="backTop"
            fab dark color="#709dca" bottom right fixed small
            :style="{'margin':'50px 20px'}"
          >
            <v-icon>keyboard_arrow_up</v-icon>
          </v-btn>
          <!-- 回到顶部 -->
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      backTopShow: false
    };
  },
  components: {},
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    backTop() {
      let back = setInterval(() => {
        if (document.body.scrollTop || document.documentElement.scrollTop) {
          document.body.scrollTop -= 100;
          document.documentElement.scrollTop -= 100;
        } else {
          clearInterval(back);
        }
      });
    },
    handleScroll() {
      if (document.documentElement.scrollTop + document.body.scrollTop > 100) {
        this.backTopShow = true;
      } else {
        this.backTopShow = false;
      }
    }
  }
};
</script>

猜你喜欢

转载自blog.csdn.net/OnismYY/article/details/86539211
今日推荐