点赞按钮动画

组件介绍

gal-praise-button 点赞按钮组件，封装了加载动画（图标缩放动画）和结果展示动画，可以用于文章、话题类的详情页面点赞功能；

兼容平台

H5	APP	小程序
✔	✔	✔

组件属性

属性名称	类型	默认值	作用
background	String	#FF0036	组件背景颜色
color	String	#FFFFFF	图标及文本颜色
borderRadius	String	15rpx	组件圆角尺寸
iconSize	String	38rpx	图标尺寸
number	Number\|String	1.2w	点赞数量，支持字符串或数值
numberSize	String	36rpx	点赞数量文本尺寸
padding	String	20rpx	组件内间距

组件事件

tapme : 组件被点击时触发；

组件方法

loading() : 开启组件加载动画（点赞图标缩放动画）；
stopLoading() : 停止动画并展示结果及动画；

演示代码

gitee 仓库地址 : https://gitee.com/hcoder2016/grace-animation-library/blob/master/pages/demo/buttons/praise.vue

<template>
	<view class="gal-body">
		<view style="margin-top:50rpx;">
			<text class="gal-block-text gal-h4 gal-color-gray">点赞按钮演示</text>
		</view>
		<view class="gal-margin-top-large">
			<view class="praise-button">
				<gal-praise-button 
				ref="praiseButton" 
				@tapme="tapme" 
				:number="number"></gal-praise-button>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			// 点赞数量
			number : 99
		}
	},
	methods: {
		tapme : function(){
			// 判断是否已经赞过
			if(this.$refs.praiseButton.status != 1){
				if(this.$refs.praiseButton.status == 4){
					uni.showToast({
						title:"已经赞过了", icon:"none"
					});
				}
				return ;
			}
			// 图标动画 ( 代表与后端交互加载动画 )
			this.$refs.praiseButton.loading();
			// 与后端交互完成展示结果动画
			setTimeout(()=>{
				this.number = 100;
				this.$refs.praiseButton.stopLoading();
			}, 3000);
		}
	}
}
</script>
<style>
.praise-button{width:200rpx; margin-left:235rpx;}
</style>