uniapp中uview组件库丰富的LoadingIcon 加载动画

发布时间:2023年12月28日

目录

基本使用

#动画文字

#模式类型

#排列类型

#动画模式

#动画运行时间

#图标颜色

#图标尺寸

#显示或隐藏动画

API

#Props


基本使用

通过mode设定动画的类型,circle为圆圈的形状,flower为经典类似花朵的形状

<template>
	<view>
		<u-loading-icon></u-loading-icon>
	</view>
</template>

#动画文字

text可以指定文字内容?textSize可以指定文字大小

<u-loading-icon text="加载中" textSize="18"></u-loading-icon>

#模式类型

mode可以指定模式

<u-loading-icon text="花朵形"></u-loading-icon>
<u-loading-icon mode="semicircle" text="半圆"></u-loading-icon>
<u-loading-icon mode="circle" text="圆型"></u-loading-icon>

#排列类型

vertical可以指定文字和图标是否垂直排列

<u-loading-icon :vertical="true"></u-loading-icon>

#动画模式

timing-function可以指定modesemicirclecircle时动画里css中animation-timing-function的属性,默认为ease-in-out

<u-loading-icon timing-function="linear"></u-loading-icon>

#动画运行时间

duration可以指定动画的运行周期时间

<u-loading-icon duration="2000"></u-loading-icon>

#图标颜色

color可以指定动画活动区域的颜色,?inactive-color可以制定modecircle时的暗边颜色

<u-loading-icon color="red"></u-loading-icon>

<u-loading-icon mode="circle" inactive-color="red"></u-loading-icon>

#图标尺寸

通过size设定尺寸,单位rpx,组件内把size值体现为组件的宽和高

<u-loading-icon size="36"></u-loading-icon>

#显示或隐藏动画

通过show设置为truefalse,来显示或隐藏动画

<u-loading-icon :show="true"></u-loading-icon>

/* 等价于 */
<u-loading-icon show></u-loading-icon>

API

#Props

参数说明类型默认值可选值
show是否显示动画Booleantruefalse
color图标颜色Stringcolor['u-tips-color']-
textColor提示文本颜色Stringcolor['u-tips-color']-
vertical图标和文字是否垂直排列Booleanfalsetrue
mode模式选择,见上方说明Stringcirclecircle \ semicircle
size加载图标的大小,单位pxString | Number24-
textSize加载文字的大小,单位pxString | Number15-
text文字内容String--
timingFunction指定animation-timing-function的css属性,但只支持modecirclesemicircle才有效Stringease-in-out-
duration动画执行周期时间,单位msstring | Number1200-
inactiveColor图标的暗边颜色,?modecircle?模式有效Stringtransparent-
文章来源:https://blog.csdn.net/m0_72603435/article/details/135267100
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。