Vue实现简单的跑马灯

下面是使用Vue实现简单的跑马灯的完整攻略：

1. 准备工作

首先需要引入Vue库，以及一些基础的CSS样式（可根据需要自行添加）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue跑马灯</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .wrapper {
            overflow: hidden;
            white-space: nowrap;
            width: 100%;
            height: 50px;
        }

        .text {
            display: inline-block;
            margin-right: 50px;
        }

        /* 鼠标移上去时停止滚动 */
        .wrapper:hover {
            animation-play-state: paused;
        }

        /* 动画 */
        @keyframes scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-100%);
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="wrapper">
            <div class="text">这是第一条跑马灯内容</div>
            <div class="text">这是第二条跑马灯内容</div>
            <div class="text">这是第三条跑马灯内容</div>
        </div>
    </div>
</body>
</html>

2. Vue实现跑马灯

在HTML结构中，我们已经准备好了跑马灯的内容，接下来需要用Vue来实现滚动效果。

在Vue实例的created钩子中，我们通过setInterval方法每隔一定时间调用一次scroll方法来实现文字的滚动效果。在scroll方法中，我们通过计算文字内容的总长度和每次移动的距离，来更新wrapper元素的transform属性，实现滚动效果。

<div id="app">
    <div class="wrapper" ref="textWrapper">
        <div class="text">这是第一条跑马灯内容</div>
        <div class="text">这是第二条跑马灯内容</div>
        <div class="text">这是第三条跑马灯内容</div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        created: function () {
            var self = this;
            setInterval(function () {
                self.scroll();
            }, 20);
        },
        methods: {
            scroll: function () {
                var wrapper = this.$refs.textWrapper;
                var firstChild = wrapper.children[0];
                var wrapperWidth = wrapper.offsetWidth;
                var firstChildWidth = firstChild.offsetWidth;
                var offset = 1; // 每次滚动的距离

                // 如果当前元素移动到屏幕外面，就重新插入到列表的最后面
                if (wrapperWidth + wrapper.scrollLeft <= firstChildWidth) {
                    wrapper.appendChild(firstChild.cloneNode(true));
                    wrapper.scrollTop = 0;
                } else {
                    wrapper.scrollLeft += offset;
                }
            }
        }
    });
</script>

示例1：https://codepen.io/pen/abyPOmO

在第一个示例中，我们每隔20ms滚动一次文字内容，每次滚动的距离为1px，文字内容滚动到屏幕外时，将其复制一份插入到元素列表的最后面，从而实现无限滚动效果。

3. 参数配置

以上示例的滚动速度和距离是固定的，如果需要动态的配置跑马灯的滚动速度和距离，可以通过props定义组件的属性，并通过props配置来控制这些参数。

<div id="app">
    <div class="wrapper" ref="textWrapper">
        <div class="text" v-for="(item, index) in items" :key="index">{{item}}</div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('marquee', {
        props: {
            distance: {
                type: Number,
                default: 1
            },
            speed: {
                type: Number,
                default: 20
            },
            items: {
                type: Array,
                default: function () {
                    return [];
                }
            }
        },
        template: `
            <div class="wrapper" ref="textWrapper">
                <div class="text" v-for="(item, index) in items" :key="index">{{item}}</div>
            </div>
        `,
        created: function () {
            var self = this;
            setInterval(function () {
                self.scroll();
            }, self.speed);
        },
        methods: {
            scroll: function () {
                var wrapper = this.$refs.textWrapper;
                var firstChild = wrapper.children[0];
                var wrapperWidth = wrapper.offsetWidth;
                var firstChildWidth = firstChild.offsetWidth;
                var offset = this.distance;

                if (wrapperWidth + wrapper.scrollLeft <= firstChildWidth) {
                    wrapper.appendChild(firstChild.cloneNode(true));
                    wrapper.scrollTop = 0;
                } else {
                    wrapper.scrollLeft += offset;
                }
            }
        }
    });

    var app = new Vue({
        el: '#app'
    });
</script>

示例2：https://codepen.io/pen/KKWvvza

在第二个示例中，我们将实现跑马灯的逻辑封装为一个Vue组件，通过props定义组件的参数，然后通过在组件的实例中访问这些参数来控制跑马灯的滚动。在该示例中，我们新增了两个props，分别用于配置跑马灯滚动的速度和距离。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue实现简单的跑马灯 - Python技术站