CarouselImage

简介

CarouselImage为旋转图片控件,与wheelImage类似,但具有透视效果,能够进行缩放。

sample

sample实现了以carousImage作为导航栏,实现页面跳转功能。

控件布局

layout

在page中加入cariousImage控件,加入需要显示的图片合集。

bingtap属性中,绑定onTap函数。

JS代码

onTap:function(event){
    var name = event.detail.value; //获取选中项的name
    var targetPage = name.substring(0,name.length-4);//默认名称为xxx.png,去除末尾的.png
    pm.navigateTo(targetPage+"/"+targetPage); //页面跳转,具体页面根据用户创建的Page名称改变。
},

效果

sample

CarouselImage属性

公共属性

  • 控件类型

    默认 CarouselImage,且不可改动

  • 透明度

    设置背景颜色的透明度,范围: 0 ~ 255。也可以在背景颜色中设定。

    注:当背景图片的设定不为空时,将自动设置为 0。

名称

  • 控件名称

    设定控件的名称。

    在JS脚本中,可根据控件名称来指定控件,并对其进行设定或操作。

设计

  • 控件锁定

    选项:True/False

    设定该控件是否锁定。

    如果设定值为True,则设计器中无法移动该控件。

  • 是否隐藏控件

    选项:True/False

    设定该控件是否需要隐藏。

    如果设定值为True,设计器与实际效果都不会显示该控件及控件中的内容。

    当控件已隐藏时,可通过在工程管理器中双击来选中该控件。

调用属性

  • bindchange

    绑定change事件,如果设定值为onChange时,当CarouselImage的选中图片被通过触控方式改变后,将调用JS脚本中的Page对象中的onChange函数。

  • bindtap

    绑定tap事件,如果设定值为onTap时,当CarouselImage被触碰到后,将调用JS脚本中的Page对象中的onTap函数。

注意:当前选中项图片被触碰时,触发的是tap事件; 其余位置被触碰时,均为change事件。

图片

  • 背景图片

    设定控件的背景图片,不支持缩放,且居中显示。

外观

  • 背景颜色

    设定背景颜色,设定背景颜色的ARGB值。

    可打开颜色选择器,通过颜色选择器修改RGB值。

    Alpha值(即透明度),可以直接修改设定值 或 修改透明度的值。背景颜色的透明度与属性透明度的值会自动保持一致。

  • 方向

    选项: 水平/垂直

    设定控件内元素切换的方向。

  • 前景图片

    设定前景图片,前景图片在这控件的最顶层的图层。

  • 缩放比例

    设置每一层视距上的图片缩放比例,值越大,缩放程度越明显。

  • 图片文件集

    插入控件需要显示的图片,并以图片文件名作为默认name(可重新编辑),并能够调整顺序。

  • 显示个数

    设定控件内能同时显示元素的个数。

  • 正常大小

    设定每张图片之间的距离大小,不同视距层上的间距,会根据缩放比例而改变。

位置属性

  • x坐标点

    设定 控件的左上角 相对于 父控件的左上角 的横坐标。

  • y坐标点

    设定 控件的左上角 相对于 父控件的左上角 的纵坐标。

  • 高度

    设定控件的高度

  • 宽度

    设定控件的宽度

setData

  • 控件自有属性

    属性名 类型 描述 注解
    name String CariousImage控件每一项的名称 Na
    source String CariousImage控件每一项的图片资源名称 Na
    select Number/String CarouselImage控件当前选中项 当类型为number时,值从 0 起,对应第一项
  • setData 设置更改属性示例

    | 示例代码 | 注解 | | - | - | | this.setData({CarouselImage1 : {value : "app"}}) | 将 idCarouselImage1 的 CarouselImage1 控件当前选中项置为名称是"app"的项| | this.setData({CarouselImage1 : {remove : "app"}}) | 将 idCarouselImage1 的 CarouselImage1 控件中删除名为"app"的项| | this.setData({CarouselImage1 : {empty : true}}) | 将 idCarouselImage1 的 CarouselImage1 控件清空| | this.setData({CarouselImage1 : {items : { name : "app",image : "app.png"}}}) | 将 idCarouselImage1 的 CarouselImage1 控件中加入新的项,名称为"app",图片资源名称为"app.png",其中name可不填写。|