您现在的位置是:网站首页> 编程资料编程资料

小程序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))    },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

-六神源码网