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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue封装返回顶部功能的组件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1549字，纯文字阅读大概需要3分钟。

内容图文

返回顶部组件封装

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

<template>
    <div
        v-show="showToTop"
        id="top-box"
        @click="handleToTop">
        <div class="go-top">顶部</div>
    </div>
</template>

<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>

<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);
        }
    }
}

内容总结

以上是互联网集市为您收集整理的vue封装返回顶部功能的组件全部内容，希望文章能够帮你解决vue封装返回顶部功能的组件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---