vue2 新闻消息向上无缝滚动

这是很久以前项目中用到的功能,目前要达到的效果是新闻逐条向上滚动,没有使用第三方插件,vue2版本的,vue3可以自行改造,适合新闻列表模块。后续也会出其他功能块,每个功能块都很简洁,复制粘贴就能用到项目中,节约时间

代码如下:

复制代码
<template>
  <div class="news">
    <div :class="{ anim: animate }" @mouseenter="stop()" @mouseleave="up()">
      <div
        @click="handleClick(item)"
        class="news_name"
        v-for="item in newsList"
        :key="item.id"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      timer: null,
      animate: false,
      newsList: [
        { id: 1, name: "华为11111" },
        { id: 2, name: "Redmi K30 5G" },
        { id: 3, name: "小米CC9 Pro" },
        { id: 4, name: "Redmi 8" },
        { id: 5, name: "Redmi 8A" },
        { id: 6, name: "Redmi Note8 Pro" },
        { id: 7, name: "Redmi Note8" },
        { id: 8, name: "Redmi Note8" },
      ],
    };
  },
  mounted() {
    this.scrollUp(); // 开启滚动效果
  },
  methods: {
    // 查看详情
    handleClick(item) {
      console.log(item);
    },
    // 滚动
    scrollUp() {
      this.timer = setInterval(() => {
        this.animate = true; // 向上滚动的时候需要添加动画
        setTimeout(() => {
          this.newsList.push(this.newsList[0]); // 将数组的第一个元素添加到数组最后一个
          this.newsList.shift(); // 删除数组的第一个元素
          this.animate = false;
        }, 500);
      }, 4000);
    },
    //鼠标移上去停止
    stop() {
      clearInterval(this.timer);
    },
    //鼠标离开继续
    up() {
      this.scrollUp();
    },
  },
  beforeDestroy() {
    this.stop();
  },
};
</script>
<style scoped>
.news {
  width: 100%;
  height: 90px;
  background-color: #fff;
  margin-top: 50px;
  overflow: hidden;
}
.news_name {
  line-height: 30px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  transition: top 0.5s;
}
.anim {
  transition: all 0.5s;
  margin-top: -30px;
}
</style>
相关推荐
祝余呀4 分钟前
HTML初学者第四天
前端·html
浮桥1 小时前
vue3实现pdf文件预览 - vue-pdf-embed
前端·vue.js·pdf
AA-代码批发V哥2 小时前
Vue框架之钩子函数详解
vue.js
七夜zippoe2 小时前
前端开发中的难题及解决方案
前端·问题
四季豆豆豆2 小时前
博客项目 laravel vue mysql 第四章 分类功能
vue.js·mysql·laravel
晓13133 小时前
JavaScript加强篇——第七章 浏览器对象与存储要点
开发语言·javascript·ecmascript
Hockor3 小时前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军3 小时前
React 实现 useMemo
前端·react.js·前端框架
海底火旺3 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到113 小时前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter