vue封装返回顶部功能的组件返回顶部组件封装

77 阅读 0 评论 51 点赞

我是靠谱客的博主羞涩鲜花，这篇文章主要介绍vue封装返回顶部功能的组件返回顶部组件封装，现在分享给大家，希望可以做个参考。

返回顶部组件封装

移动H5网页端每一页超过1.5屏则出现返回顶部得按钮，随页面滑动固定在右下角

复制代码

1
2
3
4
5
6
7
8
9
<template>
    <div
        v-show="showToTop"
        id="top-box"
        @click="handleToTop">
        <div class="go-top">顶部</div>
    </div>
</template>

复制代码

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
<script>
export default {
    name: 'ToTop',
    data() {
        return {
            showToTop: false,
            screenH: 0
        }
    },
    mounted() {
        window.addEventListener('scroll', this.scrollTop);
        this.$nextTick(() => { this.screenH = window.screen.height });
    },
    destroyed() {
        window.removeEventListener('scroll', this.scrollTop);
    },
    methods: {
        handleToTop() {
            // document.documentElement.scrollTop = document.body.scrollTop = 0;
            const c = document.documentElement.scrollTop || document.body.scrollTop;
            if (c > 0) {
                window.requestAnimationFrame(this.handleToTop);
                window.scrollTo(0, c - c / 5);
            }
        },
        scrollTop() {
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            if (scrollTop > this.screenH * 1.5) {
                this.showToTop = true
            } else {
                this.showToTop = false
            }
        }
    }
}
</script>

复制代码

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
<style lang="less" scoped>
#top-box{
    position:fixed;
    bottom:70px;
    right:12px;
    .go-top{
        width: 11.733vw;
        height: 11.733vw;
        background: #FFFFFF;
        line-height: 2.2em;
        box-shadow: 0px 2px 10px 0px rgba(103, 139, 219, 0.15);
        border: 1px solid #E4E4E4;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        border-radius: 50%;
        font-size:12px;
        box-sizing: border-box;
        padding-top: 4vw;
        color: #66686B;
        text-align: center;
        position: relative;
        &:before{
            content: '';
            position: absolute;
            top: 25%;
            right: 4.5vw;
            width: 2vw;
            height: 2vw;
            border: 2px solid #66686B;
            border-width: 2px 2px 0 0;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
    }
}