用vue简单实现滚动播放

最新推荐文章于 2024-08-05 08:00:00 发布

无敌喜之郎

最新推荐文章于 2024-08-05 08:00:00 发布

阅读量1.3k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_54944506/article/details/123110729

版权

Vue.js 自动滚动鼠标事件数据绑定前端开发

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #scroll-test {
            height: 150px;
            overflow: hidden;
            background-color: yellow;
        }
        li {
            height: 46px;
        }
    </style>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="root">
        <ul id="scroll-test" @mouseenter="mouseenter()" @mouseleave="moveScroll">
            <li v-for="(item,index) of dataList" :key=index>
                {{item.name}}-{{item.title}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: function () {
                return {
                    dataList: [],
                    number: 0,
                    timer: '',
                }
            },
            mounted() {
                for (let i = 0; i < 10; i++) {
                    this.dataList.push({
                        name: '绝对' + i,
                        title: '无敌' + i
                    })
                }
                //未避免出现跳转的很突兀的情况，需要准备两份数据
                this.dataList = [...this.dataList,...this.dataList]
                this.moveScroll()

            },
            methods: {
                moveScroll() {
                    this.timer = setInterval(() => {
                        this.number++
                        //因为数组是双份的 需要/2 46是每一个li的高度
                        //当滚动超过一份数据时，将number重置为0
                        if (this.number > ((this.dataList.length / 2) * 46)) {
                            this.number = 0
                        }
                        document.getElementById('scroll-test').scroll(this.number - 1, this.number)
                    }, 50)
                },
                mouseenter(){
                    clearInterval(this.timer)
                }
            }
        })


    </script>

</body>

</html>