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>
相关推荐
Mr_Mao1 小时前
Naive Ultra:中后台 Naive UI 增强组件库
前端
前端小趴菜052 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~3 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.4 小时前
serviceWorker缓存资源
前端
RadiumAg5 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo5 小时前
ES6笔记2
开发语言·前端·javascript
yanlele5 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
xiaolang_8616_wjl6 小时前
c++文字游戏_闯关打怪2.0(开源)
开发语言·c++·开源
中微子7 小时前
React状态管理最佳实践
前端