vue 实现从下往上无缝滚动

最新推荐文章于 2025-06-19 17:12:49 发布

小皮皮不皮

最新推荐文章于 2025-06-19 17:12:49 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue的一些使用技巧

本文链接：https://blog.youkuaiyun.com/fengxiaopeng74/article/details/119862517

vue的一些使用技巧专栏收录该内容

30 篇文章

订阅专栏

本文分享了一个在项目中解决列表滚动问题的高效解决方案，通过 Vue.js 实现了无缝滚动且适应不同屏幕的列表，避免了滚动不流畅和暂停滚动的问题。适合在动态更新内容的场景下使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中总是遇到一些列表内容，想要让他滚动起来，但是一直没有找到好的案例来实现，插件又有很多的限制，比如会出现滚动不流畅，或者无法滚动一条内容暂停一下再继续，大部分都无法在自适应的项目中实现，最近终于找到了一个案例，符合我的需求所以记录下来方便以后使用！也希望有帮助到大家

<template>

  <div class="heaerBody">

      <div class="seamless-warp">

        <ul

          :class="{ item: true, animationRolls: animatedLock }"

          @mouseout="autoScroll()"

          @mouseover="clearScroll()"

        >

          <li v-for="(item, index) in listData" :key="index">

            <span class="date" v-text="item.date"></span>

            <span class="title" v-text="item.title"></span>

          </li>

        </ul>

    </div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      listData: [

        {

          title: "铜霞路中交清水塘投资开发有限公司：货车与小车刮擦，无人受伤",

          date: "2021-06-16  10:22:05",

        },

        {

          title: "无缝滚动第二行无缝滚动第二行",

          date: "2017-12-16",

        },

        {

          title: "无缝滚动第三行无缝滚动第三行",

          date: "2017-12-16",

        },

        {

          title: "无缝滚动第四行无缝滚动第四行",

          date: "2017-12-16",

        },

        {

          title: "无缝滚动第五行无缝滚动第五行",

          date: "2017-12-16",

        },

        {

          title: "无缝滚动第六行无缝滚动第六行",

          date: "2017-12-16",

        },

        {

          title: "无缝滚动第七行无缝滚动第七行",

          date: "2017-12-16",

        },

        {

          title: "无缝滚动第八行无缝滚动第八行",

          date: "2017-12-16",

        },

        {

          title: "无缝滚动第九行无缝滚动第九行",

          date: "2017-12-16",

        },

      ],

      timer: null,

    };

  },

  methods: {

    scroll() {

      this.animatedLock = true;

      setTimeout(() => {

        //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多

        this.listData.push(this.listData[0]); // 将数组的第一个元素添加到数组的

        this.listData.shift(); //删除数组的第一个元素

        this.animatedLock = false;

      }, 500);

    },

    autoScroll() {

      this.timer = setInterval(this.scroll, 3000);

    },

    clearScroll() {

      clearInterval(this.timer);

    },

  },

  mounted() {

    setInterval(() => {

      this.sundayFn();

    }, 1000);

    this.autoScroll();

  },

};

</script>



<style scoped>

.seamless-warp {

  width: 100%;

  height: 0.35rem;

  overflow: hidden;

}

.item {

  width: 100%;

}

.seamless-warp ul li {

  height: 0.35rem;

  line-height: 0.35rem;

  color: var(--headerColor);

  white-space: nowrap; /*规定文本不换行**/

  text-overflow: ellipsis; /**显示省略符号来代表被修剪的文本。*/

  overflow: hidden;

}

.seamless-warp ul li:hover {

  text-decoration: underline;

}

.seamless-warp ul li > span:first-child {

  margin-right: 0.05rem;

}





</style>