gotoTop.vue
1.04 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<template>
<div class="goto-top" @click="gotoTop" v-show="isShow || top == '0'">
<img src="static/img/icon_goto_top.png" class="goto-top-img" />
</div>
</template>
<script>
export default {
data() {
return {
isShow: false
};
},
props: {
top: {
type: Number,
default: 100
}
},
methods: {
/**
* 回到顶部
*/
gotoTop() {
document.documentElement.scrollTop = document.body.scrollTop = 0;
},
scrollEventListener() {
if ((document.documentElement.scrollTop || document.body.scrollTop) >= this.top) {
this.$set(this, "isShow", true);
} else {
this.$set(this, "isShow", false);
}
}
},
mounted() {
// 监听滚动条位置
window.addEventListener("scroll", this.scrollEventListener);
},
beforeDestroy() {
// 取消监听滚动条
window.removeEventListener("scroll", this.scrollEventListener);
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/less" lang='less' scoped>
@import './gotoTop';
</style>