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

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



基本使用

通过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 是否显示动画 Boolean true false
color 图标颜色 String color['u-tips-color'] -
textColor 提示文本颜色 String color['u-tips-color'] -
vertical 图标和文字是否垂直排列 Boolean false true
mode 模式选择,见上方说明 String circle circle \ semicircle
size 加载图标的大小,单位px String | Number 24 -
textSize 加载文字的大小,单位px String | Number 15 -
text 文字内容 String - -
timingFunction 指定animation-timing-function的css属性,但只支持modecirclesemicircle才有效 String ease-in-out -
duration 动画执行周期时间,单位ms string | Number 1200 -
inactiveColor 图标的暗边颜色, modecircle 模式有效 String transparent -
相关文章
|
20天前
|
数据挖掘
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
43 10
|
20天前
|
搜索推荐 JavaScript 数据可视化
uniapp/vue个性化单选、复选组件
uniapp/vue个性化单选、复选组件
56 5
|
19天前
|
数据可视化 大数据 API
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
52 2
|
19天前
|
存储 API 数据库
uniapp APP自动更新组件
uniapp APP自动更新组件
41 1
|
5天前
|
移动开发 编解码 数据可视化
低代码可视化-uniapp SliderRange区间组件-代码生成器
SliderRange区间组件是一种用户界面元素,允许用户通过拖动滑块选择数值范围。组件支持微信小程序、H5和App,具有高度可定制性、响应式设计和多种事件处理功能。适用于价格筛选、音量调节等场景。代码实现包括滑动区域、滑块、事件处理等部分,支持可视化配置步长、颜色等属性。使用时需注意选择合适步长、提供清晰标签和考虑无障碍设计。
22 0
|
21天前
|
移动开发 小程序
UniApp+uView实现图片上传返回Base64
UniApp+uView实现图片上传返回Base64
41 0
|
21天前
|
编解码 数据可视化 API
DIY可视化UniApp表格组件
DIY可视化UniApp表格组件
26 0
|
24天前
|
机器学习/深度学习 算法 数据可视化
UniApp手机滑块验证组件代码生成器
UniApp手机滑块验证组件代码生成器
43 0
|
24天前
|
前端开发 JavaScript
uniapp纯CSS实现圆形进度条组件
uniapp纯CSS实现圆形进度条组件
64 0
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
120 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)