之前踩了一个大坑,总结的第一个方法会影响vuetify组件中的视差,就连在苹果手机打开网页也无法滚动查看网页了,滑一下动一下,从大神那里整理了另外一个方式,没有冲突,非常感谢大牛
我的环境:
- vue-cli搭建的脚手架
- 有多个页面,靠切换路由来切换页面,下面的内容放到App.vue中即可
- 使用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>