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>
相关文章
|
Android开发
autojs下拉刷新
牙叔教程 简单易懂
1243 0
|
10月前
|
敏捷开发 数据可视化 开发工具
如何使用分支管理代码更改?
如何使用分支管理代码更改?
700 57
|
Java Linux 测试技术
Java sdk连接fabric网络的谜之报错
Java sdk连接fabric网络的谜之报错
627 0
|
人工智能 Cloud Native Serverless
从零到一:阿里云CAP助你轻松高效构建云应用
云原生应用开发平台CAP是阿里云提供的一站式应用开发及生命周期管理平台。它内置丰富的Serverless和AI应用模板、先进的开发者工具和企业级应用管理功能,帮助个人和企业开发者快速构建、部署和管理云上应用,大幅提升研发、部署和运维效能。CAP支持Web应用、AI应用、ETL数据处理等多种场景,提供图形化、低代码的流程编排能力,助力开发者高效构建复杂业务流程。
|
存储 JavaScript 前端开发
成功解决:Cannot read properties of undefined (reading ‘commit‘)
这篇文章提供了解决Vuex中"Cannot read properties of undefined (reading 'commit')"错误的两种方法:检查模板中的数据属性是否存在,以及确保在Vue实例中正确挂载了store对象。
成功解决:Cannot read properties of undefined (reading ‘commit‘)
|
搜索推荐
Edge——如何屏蔽CSDN搜索结果
Edge——如何屏蔽CSDN搜索结果
598 1
Edge——如何屏蔽CSDN搜索结果
|
运维 Ubuntu Linux
Linux系统之ncdu命令的基本使用
【8月更文挑战第8天】Linux系统之ncdu命令的基本使用
386 2
Linux系统之ncdu命令的基本使用
|
算法 Java
Java项目不使用框架如何实现限流?
Java项目不使用框架如何实现限流?
301 2

热门文章

最新文章

下一篇
开通oss服务