nativescript-slideshow-busy-indicator

此插件允许您使用您提供的图像集轻松创建一个忙碌指示器（加载器），如图所示。它的工作方式是循环播放图像，并具有漂亮的过渡效果。

Sample Android

先决条件

您需要一组将要循环播放的图像。格式可以是 NS Image 模块支持的任何格式。为了达到最佳效果，建议使用图标样式的图像（例如带有透明度的 PNG 图像）。请参阅演示。

安装

npm install nativescript-slideshow-busy-indicator --save

使用方法

您需要在您的页面标签中添加 xmlns:indicator="nativescript-slideshow-busy-indicator" 命名空间，然后只需在页面上使用 <indicator:BusyIndicator/> 以添加小部件。

必须设置的属性是：images - 将此属性设置为表示您想要显示的图像路径的字符串数组，例如

public images = ["~/images/01.png", "~/images/02.png", "~/images/03.png", "~/images/04.png"];

isBusy - 当设置为 true 时，指示器可见，当为 false 时不可见

然后您可以使用指示器如下

<indicator:BusyIndicator isBusy="{{ isBusy }}"
 images="{{ images }}"
 indicatorWidth="60" 
 indicatorHeight="60" 
 indicatorBorderRadius="30" 
 indicatorColor="red" />

一些示例

输出	代码
	<indicator:BusyIndicator isBusy="{{ isBusy }}" images="{{ images }}" indicatorWidth="60" indicatorHeight="60" indicatorBorderRadius="30" indicatorColor="red" />
	<indicator:BusyIndicator isBusy="{{ isBusy }}" images="{{ images }}" indicatorWidth="90" indicatorHeight="90" indicatorBorderRadius="30" indicatorColor="yellow" backOpacity="0.4" backColor="pink" />
	<indicator:BusyIndicator isBusy="{{ isBusy }}" images="{{ images }}" indicatorWidth="120" indicatorHeight="100" indicatorBorderRadius="20" indicatorColor="red" backOpacity="0.6" backColor="black" />

API

属性	描述
backOpacity	设置背景层的透明度（从 0 到 1 的浮点值）
backColor	设置背景层的颜色（例如："red"，"#FF0000"）
indicatorOpacity	设置指示器层的透明度（从 0 到 1 的浮点值）
indicatorColor	设置指示器层的颜色（例如："green"，"#00FF00"）
indicatorHeight	设置指示器层的高度（以像素为单位）
indicatorWidth	设置指示器层的宽度（以像素为单位）
indicatorBorderRadius	设置指示器层的边框半径（默认为 0，如果您想使指示器为圆形，例如，可以设置为 indicatorHeight 的 0.5 倍）

许可

Apache License 版本 2.0，2004 年 1 月