qrcode
扫描二维码查看 H5 演示效果
qrcode
扫描二维码查看演示效果
taro-ui, 非 taro-ui-vue3
wxapp

ActivityIndicator 活动指示器


该组件提供一个加载等待元素,也就是 Loading 组件

使用指南

在 Taro 文件中引入组件

import { AtActivityIndicator } from 'taro-ui-vue3'

组件依赖的样式文件(仅按需引用时需要)

@import "taro-ui-vue3/dist/style/components/activity-indicator.scss";

一般用法

<template>
  <AtActivityIndicator></AtActivityIndicator>
</template>

自定义尺寸

<template>
  <AtActivityIndicator :size="32"></AtActivityIndicator>
</template>

自定义颜色

<template>
  <AtActivityIndicator color='#13CE66'></AtActivityIndicator>
</template>

自定义需要展示的文字

<template>
  <AtActivityIndicator content='加载中...'></AtActivityIndicator>
</template>

状态切换

<template>
  <AtActivityIndicator :isOpened="true"></AtActivityIndicator>
</template>

垂直水平居中(当设置 center 时需要给父容器提供 position: relative 属性)

<template>
  <AtActivityIndicator mode='center'></AtActivityIndicator>
</template>

AtActivityIndicator 参数

参数说明类型可选值默认值
mode元素的类型Stringcenter,normalnormal
sizeloading 图的大小Number-24
colorloading 图的颜色String-#6190E8
content元素的内容文本String--
isOpened控制元素显示隐藏Boolean-true