风动之石的博客

简单跑马灯

说明

简单的跑马灯实现，支持：

  • 自适应内容项的高度

示例

1 1 1 1 1 1 1 1 1 1
2 2 2 2 2 2 2 2 2 2
3 3 3 3 3 3 3 3 3 3
4 4 4 4 4 4 4 4 4 4
5 5 5 5 5 5 5 5 5 5
6 6 6 6 6 6 6 6 6 6
7 7 7 7 7 7 7 7 7 7
8 8 8 8 8 8 8 8 8 8
9 9 9 9 9 9 9 9 9 9
10 10 10 10 10 10 10 10 10 10

调用

<template>
    <BaseMarquee class="base-marquee">
        <!-- 请确保此处的 slot 内容是个 v-for 循环的标签，且必须存在 key -->
        <div
            v-for="i in 10"
            :key="i"
            class="marquee-item"
        >
            {{ new Array(10).fill(i).join(' ') }}
        </div>
    </BaseMarquee>
</template>

<script>
import BaseMarquee from './index.vue';
export default {
    name: 'SimpleMarqueeExample',
    components: {
        BaseMarquee
    }
};
</script>

<style lang="less" scoped>
.base-marquee {
    height: 30px;
    border-radius: 15px;
}
.marquee-item {
    line-height: 30px;
}
</style>
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

代码

组件源码

<template>
    <div
        ref="baseMarquee"
        class="base-marquee"
    >
        <div
            ref="marqueeList"
            class="marquee-list"
            :class="{'transition-top': transition}"
            @transitionend="transitionend"
        >
            <slot />
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            timer: null,
            liHeight: 0,
            transition: false
        };
    },
    mounted() {
        this.initSize();
        this.timer = setInterval(this.showMarquee, 3000);
    },
    destroyed() {
        clearInterval(this.timer);
    },
    methods: {
        initSize() {
            this.liHeight = this.$refs.marqueeList.firstElementChild.offsetHeight || 0;
            this.$refs.baseMarquee.style.height = this.liHeight + 'px';
        },
        setMarqueeUlMarginTop(height) {
            if (this.$refs.marqueeList) {
                this.$refs.marqueeList.style.marginTop = -height + 'px';
            }
        },
        showMarquee() {
            this.transition = true;
            this.setMarqueeUlMarginTop(this.liHeight);
        },
        transitionend() {
            this.transition = false;
            setTimeout(() => {
                // 放在异步操作里，防止闪跳（第一条滚动后，先闪现第三条，再稳定在第二条上）
                const marqueeList = this.$refs.marqueeList;
                marqueeList.appendChild(marqueeList.firstElementChild);
                this.setMarqueeUlMarginTop(0);
            }, 0);
        }
    }
};
</script>

<style lang="less" scoped>
.base-marquee {
    width: 100%;
    padding: 0 15px;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.30);
    box-sizing: border-box;
    overflow: hidden;
    .marquee-list {
        &.transition-top {
            transition: all .5s;
        }
    }
}
</style>
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74