无缝滚动的实现

最新推荐文章于 2024-03-20 14:51:20 发布

yzbyxmx

最新推荐文章于 2024-03-20 14:51:20 发布

阅读量417

点赞数

分类专栏： vue 文章标签： vue.js html5 css3

本文链接：https://blog.csdn.net/u013262823/article/details/104521303

版权

本文介绍了两种实现无缝滚动的方法。一是通过普通的JavaScript代码，利用数组操作和定时器来达到滚动效果；二是利用vue-seamless-scroll插件，并详细说明了配置和使用该插件的示例。

摘要由CSDN通过智能技术生成

在这里插入图片描述

普通代码实现滚动

 <div class="m-t-20 fz12 m-l-15">普通滚动</div>
        <div class="scroll-box">
            <div class="new-icon">

            </div>
            <div class="news-content">
                <div class="item-list"
                     :class="{'animation': showAnimation }">
                    <div v-for="(item, index) in newsList"
                         @click="toDetail(item)"
                         :key="index">
                        <p class="fz14 c-gray5">{
   {
   item.name}}</p>
                        <p class="fz10 c-gray4 word-ellipse">{
   {
   item.tips}}</p>
                    </div>
                </div>
            </div>
        </div>

普通方法实现的过程，为了每次只展示一条数据，我们可以不断地去更改数组元素顺序，方法如下（
setTimeout(() => {
this.newsList.push(this.newsList[0])
this.newsList.shift()
this.showAnimation = false
}, 500)）
然后设置一个定时器，不断地去执行该方法。

使用vue-seamless-scroll插件

<div class="m-t-20">
            <div class="fz12 c-gray5 m-l-15">使用vue-seamless-scroll实现滚动</div>
            <div class="scroll-box">
                <div class="new-icon">

                </div>
                <div class="news-content">
                    <vue-seamless-scroll :data="newsList"
                                         :class-option="classOption"
                                         class="seamless-warp">
                        <ul>
                            <li v-for="(item, index) in newsList" :key