广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue实现消息向上无缝滚动效果
  • 232
分享到

vue实现消息向上无缝滚动效果

vue无缝滚动vue消息无缝滚动vue消息向上滚动 2022-11-13 05:11:01 232人浏览 薄情痞子
摘要

本文实例为大家分享了Vue实现消息向上无缝滚动效果的具体代码,供大家参考,具体内容如下 代码: <ul class="new-list" :class="{anim:anim

本文实例为大家分享了Vue实现消息向上无缝滚动效果的具体代码,供大家参考,具体内容如下

代码:

<ul class="new-list" :class="{anim:animate}" @mouseenter="Stop()" @mouseleave="Up()">
  <li v-for="item in noticeList">
    ...
  </li>
</ul>
<script>
  export default {
    data() {
      return {
        noticeList: [],
        animate:false,
        intNum: undefined,
      }
    },
    created: function () {
      this.getNoticeData();
    },
    methods: {
      getNoticeData() {
        this.$Http.get('/news/allList', {
          params: {
            'pageNumber': 10,
            'currentPage': 1
          }
        }).then(res => {
          this.noticeList = res.data.items;
          this.ScrollUp();
        });
      },
      ScrollUp() {
        this.intNum = setInterval(() => {
          this.animate=true;// 向上滚动的时候需要添加css3过渡动画
          setTimeout(()=>{
            this.noticeList.push(this.noticeList[0]);// 将数组的第一个元素添加到数组的
            this.noticeList.shift(); //删除数组的第一个元素
            this.animate=false;
          },500)
        }, 10000);
      },
      //鼠标移上去停止
      Stop() {
        clearInterval(this.intNum);
      },
      Up() {
        this.ScrollUp();
      },
    }
  }
</script>

样式

.new-list{
    line-height: 28px;
    transition: top 0.5s;
}
.anim{
    transition: all 0.5s;
    margin-top: -28px;//高度等于行高
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: vue实现消息向上无缝滚动效果

本文链接: https://www.lsjlt.com/news/145529.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue实现消息向上无缝滚动效果
    本文实例为大家分享了vue实现消息向上无缝滚动效果的具体代码,供大家参考,具体内容如下 代码: <ul class="new-list" :class="{anim:anim...
    99+
    2022-11-13
    vue无缝滚动 vue消息无缝滚动 vue消息向上滚动
  • vue怎么实现消息向上无缝滚动效果
    这篇文章主要讲解了“vue怎么实现消息向上无缝滚动效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue怎么实现消息向上无缝滚动效果”吧!效果如下代码:<ul class=...
    99+
    2023-06-29
  • vue实现消息无缝滚动效果
    本文实例为大家分享了vue实现消息无缝滚动效果的具体代码,供大家参考,具体内容如下 JS export default { data() { return { ani...
    99+
    2022-11-13
    vue 消息无缝滚动效果
  • vue实现无限消息无缝滚动
    本文实例为大家分享了vue实现无限消息无缝滚动的具体代码,供大家参考,具体内容如下 一、html <div class="table_box">    <div c...
    99+
    2022-11-13
    vue无限消息滚动 vue消息无缝滚动 vue无缝滚动
  • vue实现公告消息横向无缝循环滚动
    本文实例为大家分享了vue实现公告消息横向无缝循环滚动的具体代码,供大家参考,具体内容如下 该组件实现了公告消息的无缝横向滚动。我命名为marqueex.vue文件,感谢原来博主的分...
    99+
    2022-11-13
    vue消息无缝滚动 vue横向无缝循环滚动 vue无缝循环滚动
  • vue怎么实现无限消息无缝滚动
    本篇内容主要讲解“vue怎么实现无限消息无缝滚动”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue怎么实现无限消息无缝滚动”吧!一、html<div class="t...
    99+
    2023-06-29
  • vue怎么实现公告消息横向无缝循环滚动
    这篇文章主要讲解了“vue怎么实现公告消息横向无缝循环滚动”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue怎么实现公告消息横向无缝循环滚动”吧!marqueex.vue<templ...
    99+
    2023-06-29
  • js如何实现文字无缝向上滚动效果
    这篇文章给大家分享的是有关js如何实现文字无缝向上滚动效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。静态效果如下:(动态效果复制粘贴下面代码可见)代码如下:<!DOCT...
    99+
    2022-10-19
    js
  • vue实现列表无缝滚动效果
    本文实例为大家分享了vue实现列表无缝滚动效果的具体代码,供大家参考,具体内容如下 1.安装 npm install vue-seamless-scroll --save 2.在需要...
    99+
    2022-11-13
    vue列表无缝滚动 vue列表滚动 vue无缝滚动
  • vue实现简单无缝滚动效果
    本文实例为大家分享了vue实现简单无缝滚动的具体代码,供大家参考,具体内容如下 效果 实现思路 在vue中如何复制一份列表出来呢且不能丢失绑定的事件,很简单使用slot插槽,使用...
    99+
    2022-11-13
    vue 无缝滚动
  • 怎么用vue实现无缝滚动效果
    今天小编给大家分享一下怎么用vue实现无缝滚动效果的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。安装NPMnpm insta...
    99+
    2023-07-04
  • 基于vue-seamless-scroll实现无缝滚动效果
    vue中,基于vue-seamless-scroll无缝滚动,供大家参考,具体内容如下 1、安装vue-seamless-scroll npm install vue-seamles...
    99+
    2022-11-13
    vue 无缝滚动
  • vue怎么实现简单无缝滚动效果
    本篇内容介绍了“vue怎么实现简单无缝滚动效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!效果实现思路在vue中如何复制一份列表出来呢且不...
    99+
    2023-06-29
  • vue或css动画实现列表向上无缝滚动
    本文实例为大家分享了vue或css动画实现列表向上无缝滚动的具体代码,供大家参考,具体内容如下 方法一:vue的实现方法 <div id="publishMain" clas...
    99+
    2022-11-13
    vue列表向上无缝滚动 vue无缝滚动 css向上无缝滚动
  • vue3实现CSS无限无缝滚动效果
    本文实例为大家分享了vue3实现CSS无限无缝滚动效果的具体代码,供大家参考,具体内容如下 template 双层div嵌套,进行隐藏滚动显示 <div class="li...
    99+
    2022-11-12
    vue3无限无缝滚动 vue3无缝滚动 vue3滚动
  • vue如何实现无缝滚动手摸手效果
    这篇文章主要讲解了“vue如何实现无缝滚动手摸手效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue如何实现无缝滚动手摸手效果”吧!需求分析通过使用类似下列代码的方式实现<Swip...
    99+
    2023-07-05
  • vue.js如何实现无缝滚动效果
    这篇文章将为大家详细讲解有关vue.js如何实现无缝滚动效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一个简单的基于vue.js的无缝滚动 :feet:在线...
    99+
    2022-10-19
    vue
  • JavaScript实现页面无缝滚动效果
    本文实例为大家分享了JavaScript实现页面无缝滚动效果的具体代码,供大家参考,具体内容如下 目前我只使用两种方式,如果还有其他方式,希望推荐一下。 1、js+transform...
    99+
    2022-11-13
    js页面无缝滚动 js无缝滚动 js页面滚动
  • 基于vue-seamless-scroll怎么实现无缝滚动效果
    这篇文章主要介绍了基于vue-seamless-scroll怎么实现无缝滚动效果的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇基于vue-seamless-scroll怎么实现无缝滚动效果文章都会有所收获,下面...
    99+
    2023-06-29
  • vue或css怎么实现列表向上无缝滚动动画
    本篇内容主要讲解“vue或css怎么实现列表向上无缝滚动动画”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue或css怎么实现列表向上无缝滚动动画”吧!效果如下:方法一:vue的实现方法<...
    99+
    2023-06-29
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作