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>
相关文章
|
6月前
|
小程序 前端开发 iOS开发
uView内置样式
uView内置样式
83 1
|
6月前
|
移动开发 JavaScript 小程序
uView LoadMore 加载更多
uView LoadMore 加载更多
90 0
|
6月前
|
移动开发 JavaScript 小程序
uView Tabbar 底部导航栏
uView Tabbar 底部导航栏
178 0
|
29天前
|
资源调度 JavaScript 前端开发
在 Vue 3 中实现流畅的 Swiper 滑动效果
本文介绍了如何在 Vue 3 项目中集成 Swiper,涵盖了从安装、基本用法到丰富的配置选项。通过简单的示例,读者将学习如何创建响应式的图片轮播,利用 Swiper 的循环、自动播放和自定义分页功能,提升用户体验。无论是简单的幻灯片还是复杂的滑块效果,Swiper 都能轻松实现,帮助开发者快速构建出美观的滑动组件。
281 0
|
1月前
|
前端开发 JavaScript
uniapp纯CSS实现圆形进度条组件
uniapp纯CSS实现圆形进度条组件
84 0
|
6月前
|
前端开发
前端进度条组件NProgress
前端进度条组件NProgress
80 1
前端进度条组件NProgress
|
5月前
|
JavaScript 前端开发
JS实现移动端的轮播图滑动事件
JS实现移动端的轮播图滑动事件
63 0
|
11月前
|
JavaScript 前端开发
在Vue中实现全屏背景图片
在Vue中实现全屏背景图片
194 0
|
6月前
|
前端开发 数据可视化 API
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
408 0
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
|
6月前
|
前端开发 JavaScript CDN
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(一)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
218 0