NativeScript Shimmer

为您的 NativeScript 应用实现 Facebook 的 shimmer 效果。

使用以下原生插件

• iOS: https://github.com/facebook/Shimmer
• Android: http://facebook.github.io/shimmer-android/

安装

从命令提示符进入您的应用的根目录并执行

tns plugin add nativescript-shimmer-enduco

示例

使用方法

• main-page.xml:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
  xmlns:sh="nativescript-shimmer" 
  loaded="pageLoaded">
  <StackLayout>
    <sh:Shimmer id="shimmer">
      <Label text="Shimmer" />     
    </sh:Shimmer>
    <Button text="Toggle" tap="{{toggleShimmer}}" />
  </StackLayout>
</Page>

• main-page.ts:

import {EventData, Observable} from "data/observable";
import {Page} from "ui/page";

// Event handler for Page "loaded" event attached in main-page.xml
export function pageLoaded(args: observable.EventData) {
    // Get the event sender
    let page = <Page>args.object;
    page.bindingContext = new ShimmerDemo(page);
}

class ShimmerDemo extends Observable {
  private _enableTxt: string;
  private _shimmer: any;

  constructor(page: Page) {
    super();
    this._shimmer = page.getViewById('shimmer');
  }

  public toggleShimmer() {
    this._shimmer.enabled = !this._shimmer.enabled;
  }
}

许可协议

BSD