如何用Vue实现一个基础的无限滚动动画效果？

本文共计734个文字，预计阅读时间需要3分钟。

本文主要介绍了Vue实现的一种简单的无限循环滚动动画示例，分享给家人，具体如下：

先看实现效果：这种类似轮播的效果，通常可以用于轮播图片或文字，解决以下问题：

1. 简单的轮播动画实现；

2.解决页面中图片或文字过多时的滚动显示；

3.提升页面动态效果，增强用户体验。

以下是一个简单的实现方法：

{{ item }}

css.carousel { width: 300px; height: 100px; overflow: hidden; position: relative;}

.item { width: 300px; height: 100px; line-height: 100px; text-align: center; background-color: #f5f5f5; position: absolute;}

javascriptnew Vue({ el: '#app', data: { items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'] }})

这个例子中，我们创建了一个名为carousel的div，在其中循环渲染了5个item，每个item都是一段文字。通过CSS设置carousel的高度和overflow属性为hidden，使其只能显示一个item。当第一个item渲染完成后，使用Vue的v-for指令来渲染下一个item，从而实现无限循环的效果。

本文主要介绍了Vue实现一种简单的无限循环滚动动画的示例，分享给大家，具体如下：

先看实现效果：

这种类似轮播的效果，通常可以使用轮播的方案解决，只不过相对于我要分享的方案来说，轮播实现还是要复杂些的。
Vue提供了一种过渡动画transition-group，这里我便是利用的这个效果

// template <transition-group name="list-complete" tag="div"> <div v-for="v in items" :key="v.ix" class="item list-complete-item pro-panel" :style="{ height: sh }" > // 内容部分 </div> </transition-group> //scss .list-complete-item { transition: all 1s; } .list-complete-leave-to { opacity: 0; transform: translateY(-80px); } .list-complete-leave-active { position: absolute; }

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

mounted() { let count = 4000 if (!this.timer) { this.timer = setInterval(() => { if (this.items.length > 1) { this.remove() this.$nextTick().then(() => { this.add() }) } }, count) } }, methods: { add: function() { if (this.items && this.items.length) { const item = { ...this.removeitem[0] } item.ix = this.nextNum++ this.items.push(item) } }, remove: function() { this.removeitem = this.items.splice(0, 1) } }

如比，效果得以实现，是不是更简单点。顺带提一下，我这边实现的效果是单条滚动，就像新闻滚动那样，所以视图窗口只能看到一条数据，你也可以不这样限制，那么就能显示整个列表了，不过每次还是只有单条数据的消失效果。

PS：动态渲染图片可以使用这种方式

<img :src="require(`@/assets/imgs/icons/${somevar}.png`)" >

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

到此这篇关于Vue实现一种简单的无限循环滚动动画的示例的文章就介绍到这了,更多相关Vue 无限滚动动画内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！