当前位置: 首页 > 软件库 > 手机/移动开发 > >

nativescript-loading-indicator

NativeScript Loading Indicator plugin
授权协议 Apache-2.0 License
开发语言 JavaScript TypeScript
所属分类 手机/移动开发
软件类型 开源软件
地区 不详
投 递 者 姜乐语
操作系统 iOS
开源组织
适用人群 未知
 软件概览

NativeScript Loading Indicator

NativeScript-Loading-Indicator is a plugin for NativeScript which overlays a loading indicator on the current page. Can be used, for example, to prevent the UI being interacted with while data is being fetched from an API, while informing the user that something is happening.


Installation

NativeScript 7+:

ns plugin add @nstudio/nativescript-loading-indicator

NativeScript lower than 7:

tns plugin add @nstudio/nativescript-loading-indicator@3.0.x

Screenshots

iOS

Android

Example

TypeScript

import {
  LoadingIndicator,
  Mode,
  OptionsCommon,
} from '@nstudio/nativescript-loading-indicator';

const indicator = new LoadingIndicator();

const options: OptionsCommon = {
  message: 'Loading...',
  details: 'Additional detail note!',
  progress: 0.65,
  margin: 10,
  dimBackground: true,
  color: '#4B9ED6', // color of indicator and labels
  // background box around indicator
  // hideBezel will override this if true
  backgroundColor: 'yellow',
  userInteractionEnabled: false, // default true. Set false so that the touches will fall through it.
  hideBezel: true, // default false, can hide the surrounding bezel
  mode: Mode.AnnularDeterminate, // see options below
  android: {
    view: someStackLayout.android, // Target view to show on top of (Defaults to entire window)
    cancelable: true,
    cancelListener: function (dialog) {
      console.log('Loading cancelled');
    },
  },
  ios: {
    view: someButton.ios, // Target view to show on top of (Defaults to entire window)
    square: false,
  },
};

indicator.show(options);

// after some async event maybe or a timeout hide the indicator
indicator.hide();

javascript

const LoadingIndicator = require('@nstudio/nativescript-loading-indicator')
  .LoadingIndicator;
const Mode = require('@nstudio/nativescript-loading-indicator').Mode;

const loader = new LoadingIndicator();

// optional options
// android and ios have some platform specific options
const options = {
  message: 'Loading...',
  details: 'Additional detail note!',
  progress: 0.65,
  margin: 10,
  dimBackground: true,
  color: '#4B9ED6', // color of indicator and labels
  // background box around indicator
  // hideBezel will override this if true
  backgroundColor: 'yellow',
  userInteractionEnabled: false, // default true. Set false so that the touches will fall through it.
  hideBezel: true, // default false, can hide the surrounding bezel
  mode: Mode.AnnularDeterminate, // see options below
  android: {
    view: android.view.View, // Target view to show on top of (Defaults to entire window)
    cancelable: true,
    cancelListener: function (dialog) {
      console.log('Loading cancelled');
    },
  },
  ios: {
    view: UIView, // Target view to show on top of (Defaults to entire window)
  },
};

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

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

loader.hide();

Common Options

export interface OptionsCommon {
  /**
   * Message in the loading indicator.
   */
  message?: string;

  /**
   * Details message in the loading indicator.
   */
  details?: string;

  /**
   * Color of the message text.
   */
  color?: string;

  /**
   * Background color of the loading indicator.
   */
  backgroundColor?: string;

  /**
   * Progress of the indicator when not using CustomView or Text Mode.
   */
  progress?: number;

  /**
   * Margin for the message/indicator to the edge of the bezel.
   */
  margin?: number;

  /**
   * Set true to allow user interaction.
   */
  userInteractionEnabled?: boolean;

  /**
   * Dim the background behind the indicator.
   */
  dimBackground?: boolean;

  /**
   * Hide bezel around indicator
   */
  hideBezel?: boolean;

  /**
   * The mode of the loading indicator.
   */
  mode?: Mode;

  /**
   * If `mode` is set to CustomView, then you can pass an image or view to show in the loading indicator.
   */
  customView?: any;

  /**
   * iOS specific configuration options.
   */
  ios?: OptionsIOS;

  /**
   * Android specific configuration options.
   */
  android?: OptionsAndroid;
}

Android Specific

export interface OptionsAndroid {
  /**
   * Native View instance to anchor the loading indicator to.
   */
  view?: android.view.View;
  max?: number;
  progressNumberFormat?: string;
  progressPercentFormat?: number;
  progressStyle?: number;
  secondaryProgress?: number;
  cancelable?: boolean;
  cancelListener?: (dialog: any) => void;
  elevation?: number;
}

iOS Specific

export interface OptionsIOS {
  /**
   * Native View instance to anchor the loading indicator to.
   */
  view?: UIView;
  square?: boolean;
}

Mode Enum

export enum Mode {
  Indeterminate = 0,
  Determinate = 1,
  DeterminateHorizontalBar = 2,
  AnnularDeterminate = 3,
  CustomView = 4,
  Text = 5,
}
 相关资料
  • 加载提示的过渡效果。 支持 安装 $ npm install universal-loading --save 方法 show(options) 显示 loading 提示框。 参数 属性 类型 默认值 必选 描述 支持 content String √ 提示中的文字内容 delay Number 0 x 延迟显示,单位 ms mask Boolean false x 是否显示透明蒙层,防止触摸穿

  • 简介 <loading> 为容器提供上拉加载功能。 注意 <loading> 是 <scroller>、<list>、<waterfall> 的子组件,只能在被它们包含时才能被正确渲染。   <scroller> <div v-for="num in lists"> <text>{{num}}</text> </div> <loading> <text>Loading<

  • 加载,提供了可自定义大小的加载动画。 示例 图标大小 默认大小为24px,可通过size属性配置 <cube-loading></cube-loading> <cube-loading :size="28"></cube-loading> <cube-loading :size="40"></cube-loading> Props 配置 参数 说明 类型 默认值 size 加载图标的大小,单位p

  • Weex 加载提示组件 规则 让用户知道页面正在加载 在某些特定场景下,提供有意义的文案,帮助用户明白哪个任务正在进行中 局部 Loading 不建议设置太大 Demo 使用方法 <template> <div> <wxc-loading :show="isShow" type="trip"></wxc-loading> <wxc-part-loading

  • 描述 (Description) 在延迟加载中,即使未声明变量,也可以使用变量。 例子 (Example) 以下示例演示了在LESS文件中使用lazy loading of variable - <html> <head> <link rel = "stylesheet" href = "style.css" type = "text/css" /> <title>L

  • 描述 (Description) 延迟加载,当用于大尺寸多媒体文件时,需要花费时间来加载诸如图片,视频等。 例子 (Example) 以下示例演示了延迟加载的使用,它通过触发Framework7中的“lazy”事件来加载图像 - <!DOCTYPE html> <html> <head> <meta name = "viewport" content = "width = dev