小程序animate动画实现直播间点赞
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了小程序animate动画实现直播间点赞的具体代码，供大家参考，具体内容如下
代码：
<view class="listImg">
<block wx:for="{{list}}" wx:key="index">
<image class="heart_img {{number == index?'active': ''}}" class="lazy" data-src="../../utils/image/{{index+1}}.png"></image>
</block>
</view>
<view class="click" bindtap="translate">点赞</view>.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))
},以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
