当前文档:《 Sprite API手册 我要修改这篇文章

imageshow 组件使用


imageshow图片预览组件支持浏览多张本地或网络图片,支持手势缩放原图,多图片支持左右滑动预览等,支持与其他UI组件配合构建自定义图片集展现,图片预览组件需指定宽高。

imageshow为内置UI组件

该控件只提供了一个可以缩放的图层,开发者可以结合其他控件进行组合,实现需要的效果。比如实现 新闻图片集查看的效果。

属性

公共属性

参见公共属性章节,包括:id、style、class;

defaultSrc

默认加载图片

网络加载过程中或图片加载失败时显示,只支持本地图片 本地图片:res:前缀,file:前缀,相对路径

样式

公共样式

参见公共样式章节,包括:

尺寸

定位

背景

flexbox布局:align-self,flex

cacheType

网络图片缓存方式

网络图片缓存方式,[none,memory,disk]

none:不缓存

memory:程序启动后重新请求并缓存;

disk:缓存图片保留,下次程序启动读取缓存图片展现

事件

click

点击图片时触发

该事件会多次触发

event事件对象包括:

type:事件类型,字符串类型,固定值:click;

target:触发事件的目标组件,dom对象;

timestamp:事件触发的时间戳,单位毫秒,数字类型;

param对象为Json对象,定义如下:

index:当前图片索引,数字类型;

src:当前图片路径,字符串类型;

longTouch

长按图片时触发

event事件对象包括:

type:事件类型,字符串类型,固定值:longTouch;

target:触发事件的目标组件,dom对象;

timestamp:事件触发的时间戳,单位毫秒,数字类型;

param对象为Json对象,定义如下:

index:当前图片索引,数字类型;

src:当前图片路径,字符串类型;

pageSelected

图片切换完成后触发

event事件对象包括:

type:事件类型,字符串类型,固定值:pageSelected;

target:触发事件的目标组件,dom对象;

timestamp:事件触发的时间戳,单位毫秒,数字类型

param对象为Json对象,定义如下:

index:当前图片索引,数字类型;

src:当前图片路径,字符串类型;

js方法

公共方法

事件相关,包括:

on(messageName:string,callback:Function): void 组件注册事件的触发函数

fire(messageName:string,params:Array<any>): void 组件事件的触发函数

off(messageName:string,callback:Function): void 组件移除事件的触发函数

getOn(messageName:string): Array<Function> 获取已绑定的事件的触发函数

动画相关,包括:

startAnimation(jsonData:Object,callback:Function): void 启动UI组件动画

startAnimator(jsonData:Object,callback:Function): void 启动UI组件属性动画

startKeyFrameAnimator(jsonData:Object,callback:Function): void 启动UI组件关键帧动画

releaseAnimator(): void 结束控件动画

尺寸和位置,包括:

getFrame(): Object 获取组件在父容器中的位置

setFrame(frame:Object): void 设置组件在父容器中的位置

getCenter(): Object 获取组件中心点在父容器中的位置

getAbsoluteFrame(): Object 获取组件在绘制窗口中的位置

普通Dom节点操作,包括:

getParent(): IElement 获取父节点

getNext(): IElement 获取同级下一个节点

getPrevious(): IElement 获取同级前一个节点

remove(): void 从父容器中移除自身

setAttr(attrName:string,attrValue:string): void 设置节点属性

getAttr(attrName:string):string 获取节点属性值

getAttrs(): Object 获取节点所有属性

removeAttr(attrName:string): void 移除节点属性

hasAttr(attrName:string): boolean 节点是否具有该属性

setStyle(styleName:string,styleValue:string): void 设置节点样式值

getStyle(styleName:string):string 获取节点样式值

clearStyle(styleName:string): void 移除节点样式值

setClassStyle(className:string,domobj:IElement): void 设置节点对应Class样式

getClassStyle(): string 获取节点已设置Class样式

getTag(): string 获取UI组件类型

getId(): string 获取UI组件Id标识

addData(jsonData:Object): void

添加图片集数据

参数:

jsonData:添加图片集参数,Json对象,定义如下:

index:传入页码索引,数字类型,默认从0开始计数,【0,num-1】可选项;

data:需要传递的图片集参数,数组类型,数组成员为Json对象定义如下:

  • src:需要加载图片路径,字符串类型,必选项,支持本地图片(res:前缀),网络图片(http://前缀)