vuejs如何实现文字上下滚动效果

vuejs如何实现文字上下滚动效果，下面web建站小编给大家详细介绍一下实现代码！

实现代码如下：

<div class="scroll">
  <ul ref="rollul" :class="{anim:animate==true}">
    <li v-for="item in lists">
      <span>{{item.time}}</span>
      <span>{{randomPhoneNumber()}}</span>
      <span>{{item.company}}</span>
    </li>
  </ul>
</div>

<script>
new Vue({
  el:'#app',
  data(){
    return{
      animate:false,
  	  lists:[
  	    {time:'2秒钟前',company:'公司1'},  
  	    {time:'8秒钟前',company:'公司2'}, 
  	    {time:'3分钟前',company:'公司3'},  
  	    {time:'5分钟前',company:'公司4'}
  	  ],
  	};
  },
  
  created(){
      setInterval(this.scroll,2000)
  },
  
  methods:{
   // 根据字典生成随机序列
   randomCode:function (len,dict) {
     for (var i = 0,rs = ''; i < len; i++)
     rs += dict.charAt(Math.floor(Math.random() * 100000000) % dict.length);
     return rs;
   },
   // 生成随机手机号码
   randomPhoneNumber:function(){
     return [1,this.$options.methods.randomCode(2,'3458'),'****',this.$options.methods.randomCode(4,'0123456789')].join('');
   }, 
   scroll(){
     this.animate = true
     var that = this;
     setTimeout(function(){
       that.lists.push(that.lists[0]);
       that.lists.shift();
       that.animate=false;
     },1500)
   }
  }
})
</script>

css3+html做一个简单的横向滚动文字效果

vue页面如何利用插件实现列表滚动循环

html利用marquee标签实现滚动效果（上下左右）

利用纯javascript做一个无缝对接滚动效果

countNumber.js文字滚动出错修复

标签： 文字滚动

上面是“vuejs如何实现文字上下滚动效果”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_3053.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！