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

组件介绍

gal-number-show 组件以递增动画形式展示一个数值,并提供了灵活的属性和插槽。

兼容平台

H5APP小程序

组件属性

属性名称类型默认值作用
stylesString''
数值项目样式
numberNumber900需要展示的数值
stepNumber30动画展示步数
speedNumber50每步间隔时间
directionStringflex-start展示方向 flex-start : 左侧,center : 居中,flex-end 右侧

组件插槽

gal-number-show 组件在数值前预置了插槽,可以通过此插槽来放置单位展示元素,详见演示代码;

演示代码

<template>
	<view class="gal-body pagebg" style="padding-top:50rpx;">
		<text class="gal-block-text gal-h5 gal-color-gray">文本形式</text>
		<view class="gal-margin-top">
			<gal-number-show 
			:number="999.99" 
			:step="33" 
			styles="font-size:38rpx; line-height:60rpx;">
				<view style="font-size:38rpx; line-height:60rpx;">¥</view>
			</gal-number-show>
		</view>
		<view style="height:88rpx;"></view>
		<text class="gal-block-text gal-h5 gal-color-gray">样式配置</text>
		<view class="gal-margin-top">
			<gal-number-show 
			:number="999" 
			:step="33" 
			styles="font-size:36rpx; line-height:40rpx; width:40rpx; padding:10rpx; background:#3688FF; color:#FFFFFF; margin:5rpx; text-align:center; border-radius:8rpx;">
				<view style="font-size:36rpx; line-height:40rpx; width:40rpx; padding:10rpx; background:#FF0036; color:#FFFFFF; margin:5rpx; text-align:center; border-radius:8rpx;">$</view>
			</gal-number-show>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			
		}
	},
	methods: {
		
	}
}
</script>
<style>

</style>