Vue实现一种简单的无限循环滚动动画的示例


Posted in Vue.js onJanuary 10, 2021

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

先看实现效果:

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 无限滚动动画内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Vue.js 相关文章推荐
vue在图片上传的时候压缩图片
Nov 18 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
基于vuex实现购物车功能
Jan 10 #Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 #Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 #Vue.js
vue编写简单的购物车功能
Jan 08 #Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 #Vue.js
vuex的使用和简易实现
Jan 07 #Vue.js
vue watch监控对象的简单方法示例
Jan 07 #Vue.js
You might like
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
JsRender for index循环索引用法详解
2014/10/31 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
jQuery length 和 size()区别总结
2018/04/26 jQuery
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
Vue前后端不同端口的实现方法
2018/09/19 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
Python中的rfind()方法使用详解
2015/05/19 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
python中Django文件上传方法详解
2020/08/05 Python
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
前台接待员岗位职责
2014/01/02 职场文书
法制宣传标语集锦
2014/06/25 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
八项规定整改方案
2014/10/01 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
2014年团总支工作总结
2014/11/21 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js