uView LoadingIcon 加载动画

简介: uView LoadingIcon 加载动画

此组件为一个小动画,目前用在uView的loadMore加载更多等组件的正在加载状态场景。

#平台差异说明

App(vue) App(nvue) H5 小程序

#基本使用

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

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

copy

#动画文字

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

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

copy

#模式类型

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>

copy

#排列类型

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

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

copy

#动画模式

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

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

copy

#动画运行时间

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

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

copy

#图标颜色

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

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

copy

#图标尺寸

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

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

copy

#显示或隐藏动画

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

<u-loading-icon :show="true"></u-loading-icon>
/* 等价于 */
<u-loading-icon show></u-loading-icon>
相关文章
Eclipse插件引入jar包的方法(转)
搞了两天,终于找到解决办法了。原来  Eclipse 插件项目引入外面的jar包不能用   build path---->add external jars的方法。     先说明两个概念:类加载器,OSGI 类加载器(class loader),顾名思义就是JVM用于加载类的一个工具。
1226 0
Python中实现简单爬虫的入门指南
【10月更文挑战第22天】本文将带你进入Python爬虫的世界,从基础概念到实战操作,一步步指导你如何使用Python编写一个简单的网络爬虫。我们将不展示代码示例,而是通过详细的步骤描述和逻辑讲解,帮助你理解爬虫的工作原理和开发过程。无论你是编程新手还是有一定经验的开发者,这篇文章都将为你打开一扇通往数据收集新世界的大门。
autojs下拉刷新
牙叔教程 简单易懂
1089 0
3步,0代码!一键部署DeepSeek-V3、DeepSeek-R1
3步,0代码!一键部署DeepSeek-V3、DeepSeek-R1
270 3

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问