vue实现消息无缝滚动效果

2024-10-31 08:05:49

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

JS

export default {
data() {
  return {
      animate:false,
      items:[
          {name:"马云"},
          {name:"雷军"},
          {name:"王勤"}
      ]
  }
},
created(){
    setInterval(this.scroll,1000)
},
methods: {
    scroll(){
       this.animate=true;    // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
       setTimeout(()=>{      //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
               this.items.push(this.items[0]);  // 将数组的第一个元素添加到数组的
               this.items.shift();               //删除数组的第一个元素
               this.animate=false;  // margin-top 为0 的时候取消过渡动画，实现无缝滚动
       },500)
    }
}

CSS

#box{
    width: 300px;
    height: 32px;
    overflow: hidden;
    padding-left: 30px;
    border: 1px solid black;
}
.anim{
    transition: all 0.5s;
    margin-top: -30px;
}
#con1 li{
    list-style: none;
    line-height: 30px;
    height: 30px;
}

HTML

<div id="box">
    <ul id="con1" ref="con1" :class="{anim:animate==true}">
        <li v-for='item in items'>{{item.name}}</li>
    </ul>
</div>

到此这篇关于vue实现消息无缝滚动效果的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

基于vue.js无缝滚动效果

一个简单的基于vue.js的无缝滚动 :feet:在线文档demo :ear_of_rice:小demo :blue_book:English Document 安装 NPM npm install vue-seamless-scroll --save 使用 ES6 详情的demo页面 example-src/App.vue // **main.js** import Vue from 'vue' import scroll from 'vue-seamless-scroll' Vue.use(
vue3实现CSS无限无缝滚动效果

本文实例为大家分享了vue3实现CSS无限无缝滚动效果的具体代码,供大家参考,具体内容如下 template 双层div嵌套,进行隐藏滚动显示 <div class="list-container"> <div class="marquee" id="carList"> <template v-for="(item, index) in dataMap.list" :key="index
基于vue-seamless-scroll实现无缝滚动效果

vue中,基于vue-seamless-scroll无缝滚动,供大家参考,具体内容如下 1.安装vue-seamless-scroll npm install vue-seamless-scroll --save 2.引入组件全局引入在main.js中添加 import scroll from 'vue-seamless-scroll' Vue.use(scroll) 组件局部引入 <vue-seamless-scroll></vue-seamless-scroll> impor
vue实现消息的无缝滚动效果的示例代码

朋友的项目里要实现一个消息无缝滚动的效果,中途遇到了一点小bug,每组消息滚动完再次循环时会出现停留两倍的时间间隔问题,我研究了一天终于解决了这个1S的小问题项目环境vue-cli ,请自行配置好相应的,环境及路由,这里主要介绍实现的方法第一步在模板中使用v-for方法循环出消息列表 <template> <div id="box"> <ul id="con1" ref="con1" :class="
vue中使用vue-seamless-scroll插件实现列表无缝滚动效果

需求:使用vue-seamless-scroll插件实现列表无缝滚动,也可以添加相应的点击跳转,点击事件会存在点击失效的问题.支持上下左右无缝滚动,单步滚动停留时间,以及水平方向的手动切换. 效果图: 基于vue的无缝滚动组件注意:需要给父容器一个height和:data='Array'和overfolw:hidden;左右滚动需要给ul容器一个初始化 css width. 参考配置: 向下滚动 direction:0 向下滚动 direction:1 向左滚动 direction:2 向右滚
vue实现消息向上无缝滚动效果

本文实例为大家分享了vue实现消息向上无缝滚动效果的具体代码,供大家参考,具体内容如下代码: <ul class="new-list" :class="{anim:animate}" @mouseenter="Stop()" @mouseleave="Up()"> <li v-for="item in noticeList"> ... </li> <
vue实现简单无缝滚动效果

本文实例为大家分享了vue实现简单无缝滚动的具体代码,供大家参考,具体内容如下效果实现思路在vue中如何复制一份列表出来呢且不能丢失绑定的事件,很简单使用slot插槽,使用两个插槽我们就拥有了两个列表 <div class="listScroll" ref="box"> <slot></slot> <slot></slot> </div> 组件完整代码 <templa
vue实现列表无缝滚动效果

本文实例为大家分享了vue实现列表无缝滚动效果的具体代码,供大家参考,具体内容如下 1.安装 npm install vue-seamless-scroll --save 2.在需要使用的组件中引入进行配置 import vueSeamlessScroll from "vue-seamless-scroll"; 在components中注入 components: { vueSeamlessScroll }, 3.使用 <template> <div class=
vue实现消息无缝滚动效果

本文实例为大家分享了vue实现消息无缝滚动效果的具体代码,供大家参考,具体内容如下 JS export default { data() { return { animate:false, items:[ {name:"马云"}, {name:"雷军"}, {name:"王勤"} ] } }, created(){ setInterval(this.scroll,1000) }, methods: { scroll(){ this.animate
vue实现无限消息无缝滚动

本文实例为大家分享了vue实现无限消息无缝滚动的具体代码,供大家参考,具体内容如下一.html <div class="table_box"> <div class="table_title"> <div class="table_title_item">告警时间</div> <div class="table_title_item">所属集中
详解vue 自定义marquee无缝滚动组件

先上效果图: (1) 看起来可能有点卡顿,但是实际上页面上看起来挺顺畅的. (2) 思路就是获取每一个列表的宽度,设置定时器移动列表,当移动的距离达到一个列表的宽度的时候,把这个距离放到数组的最后.这样就能达成无缝循环滚动了. 大致的情况就是下面这样: 接下来就是代码的实现: index.vue 引入组件 <template> <div> <marqueeLeft :send-val='send'></marqueeLeft > </div> &
vue实现3D切换滚动效果

本文实例为大家分享了vue实现3D切换滚动效果的具体代码,供大家参考,具体内容如下今天写项目,遇到一个点击切换的滚动需求,贴出来,做一个记录这个是最终的一个效果,点击左右小箭头,实现滚动效果,但是只是简单滚动,没有动画之类的实现思路: css中,正常写一个div用display:flex来平铺图片然后中间位置定位一个框,框大小比外面的大,中间图片随意取列表中的一个就行 js中,使用v-for循环列表点击右侧时,将循环列表中的第一个图片删除,然后添加到列表最后一个,点击左侧时同理,这样,
js实现可控制左右方向的无缝滚动效果

本文实例为大家分享了无缝滚动效果JavaScript代码实现,供大家参考,具体内容如下] 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>zzzz</title> <style> *{ margin: 0; padding:0; } body{ width: 1000px; margin: 100px a

vue实现消息无缝滚动效果

JS

CSS

HTML

相关推荐

随机推荐