账户中心 退出系统
5.0 版本 3.0 版本
使用手册 模板中心 账户中心 合作 · 服务
快速开始
动画库介绍
下载及部署
基础组件
animate.css 动画组件
animate.css 连贯动画
gal-api-animate 组件
文本动画
文本淡入淡出
文本背景动画
数值展示动画
按钮动画
提交按钮动画
边框动画按钮
点赞按钮动画
常用动画
全屏加载动画
渐变背景动画
时钟动画
红包雨动画
点赞按钮动画

组件介绍

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

兼容平台

H5APP小程序

组件属性

属性名称类型默认值作用
backgroundString#FF0036组件背景颜色
colorString#FFFFFF
图标及文本颜色
borderRadiusString15rpx
组件圆角尺寸
iconSizeString38rpx
图标尺寸
numberNumber|String1.2w点赞数量,支持字符串或数值
numberSizeString
36rpx
点赞数量文本尺寸
paddingString20rpx组件内间距

组件事件

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>