vue页面滚动动画,vue实现数字动态滚动

　　本文主要介绍了Vue实现一个简单的无限循环滚动动画的例子。本文中的示例代码非常详细，对于大家的学习或者工作都有一定的参考价值。有需要的朋友就跟着下面的边肖学习吧。

　　主要介绍一个Vue实现简单无限循环滚动动画的例子，分享给大家，如下：

　　先看实施效果：

　　这种类似轮播的效果通常可以用轮播方案解决，但是轮播的实现比我要分享的方案要复杂。

　　Vue提供了一个过渡动画transition-group，在这里我使用了这个效果。

　　//模板

　　transition-group name= list-complete tag= div

　　差异

　　v-for=项目中的v

　　:key=v.ix

　　class=项目列表-完成-项目前面板

　　:style={ height: sh }

　　//内容部分

　　/div

　　/过渡-组

　　//scss。列表-完成-项目{

　　过渡：全1；

　　}。列表-完成-留给{

　　不透明度：0；

　　transform:translate y(-80px)；

　　}。列表-完成-保留-活动{

　　位置：绝对；

　　}

　　这样动画效果出来了，但是不能自动执行，所以我利用了setInterval:

　　已安装(){

　　让计数=4000

　　如果(！this.timer) {

　　this.timer=setInterval(()={

　　if (this.items.length 1) {

　　this.remove()

　　这个。$nextTick()。然后(()={

　　this.add()

　　})

　　}

　　}，计数)

　　}

　　},

　　方法：{

　　add: function() {

　　if(this . items this . items . length){

　　常量项目={.this.removeitem[0] }

　　item.ix=this.nextNum

　　this.items.push(item)

　　}

　　},

　　移除：function() {

　　this . remove item=this . items . splice(0，1)

　　}

　　}

　　比如达到效果，是不是更简单？对了，我这里实现的效果是单次滚动，就像新闻滚动一样，所以在视图窗口只能看到一条数据。也可以显示整个列表，没有这个限制，但是每次都只有单个数据的消失效果。

　　PS:可以用这个方法动态渲染图片。

　　图片

　　:src= require(`@/assets/imgs/icons/$ { some var } . png `)

　　当然，如果有不同意见，欢迎留言交流！

　　这就是这篇关于Vue实现简单无限循环滚动动画的例子的文章。更多相关Vue无限滚动动画内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。