@wuilmerj24/gallery-view

npm install @wuilmerj24/gallery-view

注意：目前仅支持图片

用法

核心：在 you_view.xml 示例中添加 xmlns:gv="@wuilmerj24/gallery-view"

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:gv="@wuilmerj24/gallery-view" navigatingTo="navigatingTo" class="page">
    <Page.actionBar>
        <ActionBar title="gallery-view" icon="" class="action-bar">
        </ActionBar>
    </Page.actionBar>
    <StackLayout>
      <gv:GalleryView
          width="100%"
          height="100%"
          albunInit="camera"
          debug="true"
          language="es"
          file_type="image"
          showHeader="true"
          bgColorHeader="gray"
          textcolorHeader="white"
          maxItemSelect="5"
          showFooter="true"
          bgColorFooter="gray"
          textColorFooter="white"
          edit="true"
          preview="true"
          loaded="onLoad"
          errorEvent="onError"
          scroll="onScroll"
            click="onClick"
      />
    </StackLayout>
</Page>

在组件模块或应用模块中导入 Angular

import {NativeScriptGalleryViewModule} from "@wuilmerj24/gallery-view/angular"

@NgModule({
  imports: [
    NativeScriptGalleryViewModule // this line
  ],
  declarations: [GalleryViewComponent],
  schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}

<GalleryView 
    width="100%" 
    height="100%"
    debug="true"
    language="es"
    file_type="image"
    showHeader="true"
    bgColorHeader="gray"
    textcolorHeader="white"
    maxItemSelect="5"
    showFooter="true"
    bgColorFooter="gray"
    textColorFooter="white"
    edit="true"
    preview="true"
    (loaded)="onLoad($event)"
    (errorEvent)="onError($event)"
    (scroll)="onScroll($event)"
    (click)="onClick($event)"
  >

  </GalleryView>

属性

属性	类型	默认
debug	`布尔型`	`false`
language	`ELanguage`	`es`
file_type	`EFileType`	`image`
showHeader	`布尔型`	`true`
bgColorHeader	`字符串`	`hex color` 或 `string color`
textcolorHeader	`字符串`	`hex color` 或 `string color`
maxItemSelect	`数字`	`1`
showFooter	`布尔型`	`true`
bgColorFooter	`字符串`	`hex color` 或 `string color`
textColorFooter	`字符串`	`hex color` 或 `string color`
edit	`布尔型`	`false`
preview	`布尔型`	`true`

事件

事件	参数	描述
loaded	`onLoad(args: GalleryViewLoadedEvent)`	在 GalleryView 加载时触发
errorEvent	`onError(args: ErrorEvent)`	在显示 GalleryView 时触发错误
scroll	`onScroll(args: OnScrolledEvent)`	在滚动事件触发时返回所有文件数组
click	`onClick(args: OnClickedEvent)`	在点击项内触发

接口

export interface IFiles {
  id: string;
  albunName: string;
  data: Array<IFileData>;
  isSelected: boolean;
  icon: string;
}

export interface IFileData {
  id: string;
  uri: string;
  isSelected: boolean;
  info?: any;
}

示例使用

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:gv="@wuilmerj24/gallery-view" navigatingTo="navigatingTo" class="page">
    <Page.actionBar>
        <ActionBar title="gallery-view" icon="" class="action-bar">
        </ActionBar>
    </Page.actionBar>
    <StackLayout>
      <gv:GalleryView 
          width="100%" 
          height="100%"
          debug="true"
          language="es"
          file_type="image"
          showHeader="true"
          bgColorHeader="gray"
          textcolorHeader="white"
          maxItemSelect="5"
          showFooter="true"
          bgColorFooter="gray"
          textColorFooter="white"
          edit="true"
          preview="true"
          loaded="onLoad"
          errorEvent="onError"
          scroll="onScroll"
            click="onClick"
      />
    </StackLayout>
</Page>

export function onLoad(args: GalleryViewLoadedEvent) {
  console.log('load ');
}

export function onError(args: ErrorEvent) {
  console.log('error ');
}

export function onClick(args: OnClickedEvent) {
  console.log('click ',args.data);
}

export function onScroll(args: OnScrolledEvent) {
  console.log('scroll ',args.data);
}

许可

Apache 许可证版本 2.0