您现在的位置是:网站首页> 编程资料编程资料
小程序animate动画实现直播间点赞_javascript技巧_
2023-05-24
370人已围观
简介 小程序animate动画实现直播间点赞_javascript技巧_
本文实例为大家分享了小程序animate动画实现直播间点赞的具体代码,供大家参考,具体内容如下

代码:
点赞
.listImg{ position: relative; width: 100px; height: 300px; border: 2rpx solid red; } .heart_img{ width: 100rpx; height: 100rpx; display: block; opacity: 0; position: absolute; left: 26rpx; transform:translateX(-50%); bottom: 0; } click{ color: #000; }data: { list: 9, number: -1 }, randomNum(minNum, maxNum) { switch (arguments.length) { case 1: return parseInt(Math.random() * minNum + 1, 10); break; case 2: return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10); //或者 Math.floor(Math.random()*( maxNum - minNum + 1 ) + minNum ); break; default: return 0; break; } }, translate() { let self = this; // 随机数 let randomNum = this.randomNum(-30, 30); let number = this.data.number+1; console.log(number) // number是控制active的 this.setData({ number:number > 9 ? 0:number }) // .active 是选择器 this.animate('.active', [{ opacity: 1, translateY: 0, ease:'else', scale: [.6, .6] }, { scale: [1, 1], translate: [randomNum, -300] }, ], 1500, function () { //动画完成后的回调函数 }.bind(this)) },以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- 小程序tab实现页面切换_javascript技巧_
- 浅谈vue3中ref、toRef、toRefs 和 reactive的区别_vue.js_
- JavaScript中array.reduce()数组方法的四种使用实例_javascript技巧_
- js面向对象编程OOP及函数式编程FP区别_JavaScript_
- 小程序实现tab更换页面效果_javascript技巧_
- Vue.js实现页面后退时还原滚动位置的操作方法_javascript技巧_
- 微信小程序实现时间选择_javascript技巧_
- 微信小程序实现底部弹窗_javascript技巧_
- JS高级程序设计之class继承重点详解_JavaScript_
- JS class语法糖的深入剖析_JavaScript_
