vue 实现公告滚动效果

最新推荐文章于 2024-05-18 16:14:41 发布

Caroline_x

最新推荐文章于 2024-05-18 16:14:41 发布

阅读量1k

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/Caroline_x/article/details/107600404

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<template>
    <div class="test">
        <div class="content" :style="{height:contentHiehgt+'px'}">
            <div id="scrollContent">
                <div
                    class="item"
                    v-for="i in 15"
                    :key="i"
                    :style="{ height: itemHeight + 'px' }"
                >
                    {{ i }}
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            timeOut: null,
            topNum: 0,
            itemHeight: 30,
            contentHiehgt: 300,
        };
    },
    created() {
        this.timeOut = setInterval(function() {
            let obj = document.getElementById("scrollContent");
            let objHeight = obj.offsetHeight;
            if ((-this.topNum) > (objHeight-this.contentHiehgt)) {
                this.topNum = 0;
            } else {
                this.topNum -= this.itemHeight;
            }
            obj.style.marginTop = this.topNum + "px";
            obj.style.transition = "margin-top 1.5s cubic-bezier(0.63, 0.05, 0.26, 1.7)";
        }.bind(this), 3000);
        //这里.bind是因为this有问题，babel没解释箭头函数？？
    },
};
</script>
<style lang="less">
.content {
    overflow-y: auto;
}
</style>