Vue滾動(dòng)置頂組件怎么實(shí)現(xiàn)

這篇文章主要介紹“Vue滾動(dòng)置頂組件怎么實(shí)現(xiàn)”，在日常操作中，相信很多人在Vue滾動(dòng)置頂組件怎么實(shí)現(xiàn)問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Vue滾動(dòng)置頂組件怎么實(shí)現(xiàn)”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

1. 滾動(dòng)交互注意事項(xiàng)

1. 置頂圖標(biāo)在什么時(shí)候顯示，什么時(shí)候消失；

2. 滾動(dòng)的過(guò)程要做緩沖動(dòng)畫(huà)處理，即滾動(dòng)要速度要遞減，才不能顯的那么的突兀；

2. 組件設(shè)計(jì)考慮因素

1. 組件要可以傳參控制滾動(dòng)置頂?shù)奈恢茫?/p>

2. 組件要可以傳參控制滾動(dòng)置頂圖標(biāo)在什么時(shí)候顯示和消失；

3. 組件的滾動(dòng)置頂圖標(biāo)最好支持傳參自定義的樣式；

4. 組件的滾動(dòng)置頂圖標(biāo)在顯示和消失時(shí)最好支持傳參自定義的動(dòng)畫(huà)；

3. 基于Vue的滾動(dòng)置頂設(shè)計(jì)實(shí)例

<template>
    <transition :name="transitionName">
        <div
            v-show="visible"
            @click="backToTop"
            :
            class="back-to-ceiling">
            <svg
                width="16"
                height="16"
                aria-hidden="true"
                viewBox="0 0 17 17"
                class="Icon Icon--backToTopArrow"
                xmlns="http://www.w3.org/2000/svg"
                >
                <path d="M12.036 15.59a1 1 0 0 1-.997.995H5.032a.996.996 0 0 1-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z"/>
            </svg>
        </div>
    </transition>
</template>
<script>
export default {
    name: "BackToTop",
    props: {
        // 顯示時(shí)的高度
        visibilityHeight: {
            type: Number,
            default: 400,
        },
        // 滾動(dòng)置頂位置
        backPosition: {
            type: Number,
            default: 0,
        },
        // 自定義的樣式
        customStyle: {
            type: Object,
            default: function () {
                return {
                    right: "50px",
                    bottom: "50px",
                    width: "40px",
                    height: "40px",
                    "border-radius": "4px",
                    "line-height": "45px",
                    background: "#e7eaf1",
                };
            },
        },
        // 定義滾動(dòng)動(dòng)畫(huà)
        transitionName: {
            type: String,
            default: "fade",
        },
    },
    data() {
        return {
            // 是否可見(jiàn)
            visible: false,
            // 滾動(dòng)定時(shí)器
            interval: null,
            // 正在滾動(dòng)中
            isMoving: false,
        };
    },
    mounted() {
        window.addEventListener("scroll", this.handleScroll);
    },
    beforeDestroy() {
        window.removeEventListener("scroll", this.handleScroll);
        if (this.interval) {
            clearInterval(this.interval);
        }
    },
    methods: {
        // 頁(yè)面滾動(dòng)事件
        handleScroll() {
            this.visible = window.pageYOffset > this.visibilityHeight;
        },
        // 點(diǎn)擊頁(yè)面置頂
        backToTop() {
            if (this.isMoving) return;
            const start = window.pageYOffset;
            let i = 0;
            this.isMoving = true;
            this.interval = setInterval(() => {
                const next = Math.floor(
                    this.easeInOutQuad(10 * i, start, -start, 500)
                );
                if (next <= this.backPosition) {
                    window.scrollTo(0, this.backPosition);
                    clearInterval(this.interval);
                    this.isMoving = false;
                } else {
                    window.scrollTo(0, next);
                }
                i++;
            }, 16.7);
        },
        // 速度遞減運(yùn)算
        easeInOutQuad(t, b, c, d) {
            if ((t /= d / 2) < 1){
                return (c / 2) * t * t + b
            };
            return (-c / 2) * (--t * (t - 2) - 1) + b;
        },
    },
};
</script>
<style scoped>
.back-to-ceiling {
    position: fixed;
    display: inline-block;
    text-align: center;
    cursor: pointer;
}
.back-to-ceiling:hover {
    background: #d5dbe7;
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
    opacity: 0;
}
.back-to-ceiling .Icon {
    fill: #9aaabf;
    background: none;
}
</style>

到此，關(guān)于“Vue滾動(dòng)置頂組件怎么實(shí)現(xiàn)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！