微信小程序实现点赞气泡效果

先上代码：

         <view class="listImg"><block wx:for="{{8}}" wx:key="index"><image class="heart_img {{number == index?'active': ''}}" src="../../style/images/heart{{index + 1}}.png"></image></block></view>

.heart_img {position: fixed;width: 30px;height: 32px;margin-left: 25rpx;
}

  data: {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 randomNum = this.randomNum(-30, 30)// number是控制active的this.setData({number: this.data.number + 1}, () => {if (this.data.number > 7) {this.setData({number: -1})this.translate();}})// .active 是选择器this.animate('.active', [{opacity: 1,translateY: 0},{opacity: 0,translate: [randomNum, -200]},], 1000, function () {//动画完成后的回调函数}.bind(this))},

因为不会弄gif图片就先这样凑合吧。

使用微信小程序云开发写的个人简历小程序和好玩的关联微信运动遛狗的小程序，内置天气查询功能。欢迎大家扫码体验，项目详情也可到我的置顶博客查看。项目都已在码云上开源，欢迎大家star。wx_superpet这个小程序项目特别适合对微信小程序云开发技术感兴趣的同学参考。
个人简历源码：个人简历码云地址
个人简历源码：CSDN下载
wx_superpet源码:wx_superpet码云地址
wx_superpet源码:添加链接描述

微信小程序实现点赞气泡效果相关推荐

微信小程序轮播图中间变大_微信小程序实现带放大效果的轮播图
本文实例为大家分享了微信小程序实现带放大效果的轮播图,供大家参考,具体内容如下效果如图 WXML WXSS .Carousel{ margin-top: 49px; background-color ...
微信小程序实现城市选择效果(超详细)
直接进入正题首先在项目中同级创建一个components文件夹,在文件夹下创建region-picker文件夹,在该文件夹点击右键新建Component就会创建名为 region-picker.js ...
php文字左右滚动通告,微信小程序左右滚动公告栏效果代码实例
这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码如下 {{notice}} x data: ...
ar 微信小程序_微信小程序可以实现AR效果了
微信小程序可以实现AR效果了金羊网作者:马化展 2019-07-08 金羊网讯记者马化展报道:7月5日,微信宣布微信小程序可实现AR效果了.同日,首个小程序AR动态试妆的美妆品牌小程序正式落 ...
微信小程序实现星星评价效果
这篇文章主要为大家详细介绍了微信小程序实现星星评价效果,支持多个条目评价,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序实现星星评价效果的具体代码,供大家参考,具体内 ...
微信小程序实现星星评分效果
微信小程序实现星星评分效果思路很简单,小星星都是一张张独立的图片,点击的时候改变图片的路径就可以了. 我是用背景图片做的,先给盒子设置背景图片为灰色的小星星,盒子是根据js文件中的stars数组循环 ...
微信小程序动态点赞php,微信小程序小组件基于Canvas实现直播点赞气泡效果
这篇文章主要为大家详细介绍了微信小程序小组件,基于Canvas实现直播点赞气泡效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下先发Canvas实现直播点赞气泡效果图: 实现细节: 1.JS:d ...
微信小程序动态点赞php,微信小程序小组件基于Canvas实现直播点赞气泡效果
这篇文章主要为大家详细介绍了微信小程序小组件,基于Canvas实现直播点赞气泡效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下先发Canvas实现直播点赞气泡效果图: 实现细节: 1.JS: ...
微信小程序动态点赞php,在微信小程序中如何实现点赞功能
这篇文章主要介绍了微信小程序基于本地缓存实现点赞功能的方法,涉及微信小程序界面布局.事件响应及缓存操作等相关实现技巧,需要的朋友可以参考下本文实例讲述了微信小程序基于本地缓存实现点赞功能的方法.分享 ...

微信小程序实现点赞气泡效果

微信小程序实现点赞气泡效果

微信小程序实现点赞气泡效果相关推荐

最新文章

热门文章