Vue实现简单的无缝滚动

最新推荐文章于 2024-05-07 01:27:30 发布

弗兰克的天空

最新推荐文章于 2024-05-07 01:27:30 发布

阅读量4.4k

点赞数 3

分类专栏：网站前端

网站前端专栏收录该内容

75 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue实现无缝滚动</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 300px;
            height: 124px;
            line-height: 30px;
            overflow: hidden;
            padding-left: 30px;
            border: 1px solid black;
            transition: all 0.5s;
        }

        .scroll {
            transition: all 0.5s;
            margin-top: -34px;
        }

        #con1 li {
            list-style: none;
            line-height: 34px;
            height: 34px;
        }

        .active {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="box">
            <ul :class="{scroll:animate==true}">
                <li v-for='(item,index) in items' :key="index" @click="item.active = !item.active" :class="{'active':item.active}">{{item.name}}</li>
            </ul>
        </div>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                animate: false,
                items: [{
                        name: "1马云",
                        active: false
                    },
                    {
                        name: "2雷军",
                        active: false
                    },
                    {
                        name: "3张珊",
                        active: false
                    },
                    {
                        name: "4李思",
                        active: false
                    },
                    {
                        name: "5王武",
                        active: false
                    },
                    {
                        name: "6赵柳",
                        active: false
                    },
                ]
            },
            mounted() {
                setInterval(this.listScroll, 4500);
            },
            methods: {
                listScroll() {
                    if (this.items.length >= 5) {
                        this.animate = true
                        setTimeout(() => {
                            this.items.push(this.items[0]);
                            this.items.shift();
                            this.animate = false; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
                        }, 500)
                    }
                }
            }
        });
    </script>
</body>

</html>

弗兰克的天空

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
2
评论
Vue实现简单的无缝滚动

&lt;!DOCTYPE html&gt;&lt;html lang="zh-CN"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫