当前位置: 首页 > news >正文

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>
http://www.lryc.cn/news/320592.html

相关文章:

  • Elasticsearch使用Kibana进行基础操作
  • “SRP模型+”多技术融合在生态环境脆弱性评价模型构建、时空格局演变分析与RSEI 指数的生态质量评价及拓展应用教程
  • 【Windows 常用工具系列 15 -- VMWARE ubuntu 安装教程】
  • SpringSecurity(SpringBoot2.X版本实现)
  • 仿牛客项目Day8:社区核心功能2
  • Vmware虚拟机配置虚拟网卡
  • 双向链表代码(带哨兵位循环/不带哨兵位不循环
  • C语言自学笔记13----C语言指针与函数
  • 每日五道java面试题之mybatis篇(一)
  • 一文解读ISO26262安全标准:概念阶段
  • 微信小程序调用百度智能云API(菜品识别)
  • idea项目mapper.xml中的SQL语句黄色下划线去除
  • es 聚合操作(二)
  • 【vue.js】文档解读【day 5】| ref模板引用
  • 算法简单小技巧
  • 前端入职配置新电脑!!!
  • Java面试题总结15之简述你对RPC,RMI的理解
  • 内网穿透利器 n2n 搭建指南
  • phpcms头像上传漏洞引发的故事
  • 二叉树|二叉树理论基础、二叉树的递归遍历
  • JavaScript 语法-对象
  • 代码随想录阅读笔记-哈希表【四数之和】
  • JVM学习——双亲委派机制
  • 【Paper Reading】6.RLHF-V 提出用RLHF的1.4k的数据微调显著降低MLLM的虚幻问题
  • Aloudata 倾力打造,《Data Fabric 白皮书 2.0》正式发布
  • docker内部无法使用ping等网络工具解决方案
  • 后端工程师快速使用vue和Element
  • 自学rabbitmq入门到精通
  • 由浅到深认识C语言(13):共用体
  • python爬虫(9)之requests模块