nativescript-loading-indicator

nativescript-loading-indicator 是一个 NativeScript 插件，可以在当前页面上覆盖加载指示器。例如，当从 API 获取数据时，可以用来防止用户与 UI 交互，同时通知用户正在发生某些操作。

• iOS: MBProgressHUD
• Android: ProgressDialog

安装

tns plugin add nativescript-loading-indicator

示例

var LoadingIndicator = require("nativescript-loading-indicator").LoadingIndicator;

// or with TypeScript:
// import {LoadingIndicator} from "nativescript-loading-indicator";

var loader = new LoadingIndicator();

// optional options
// android and ios have some platform specific options
var options = {
  message: 'Loading...',
  progress: 0.65,
  android: {
    indeterminate: true,
    cancelable: false,
    max: 100,
    progressNumberFormat: "%1d/%2d",
    progressPercentFormat: 0.53,
    progressStyle: 1,
    secondaryProgress: 1
  },
  ios: {
    details: "Additional detail note!",
    margin: 10,
    dimBackground: true,
    color: "#4B9ED6", // color of indicator and labels
    // background box around indicator
    // hideBezel will override this if true
    backgroundColor: "yellow",
    hideBezel: true, // default false, can hide the surrounding bezel
    view: UIView, // Target view to show on top of (Defaults to entire window)
    mode: // see iOS specific options below
  }
};

loader.show(options); // options is optional

// Do whatever it is you want to do while the loader is showing, then

loader.hide();

选项

• message: string 您的消息！
• progress: number 设置进度显示

Android 特定

• 参考：https://android-docs.cn/intl/zh-tw/reference/android/app/ProgressDialog.html

iOS 特定

• 参考：https://github.com/jdg/MBProgressHUD/blob/master/Demo/Classes/MBHudDemoViewController.m

快速 模式 参考

• MBProgressHUDModeDeterminate
• MBProgressHUDModeAnnularDeterminate
• MBProgressHUDModeDeterminateHorizontalBar
• MBProgressHUDModeText
• MBProgressHUDModeCustomView
  • 与 customView: string 一起使用 - 图像文件的本地路径

屏幕截图