DotIndicator

简介

dotIndicator是点指示器控件。一般可用于显示进度加载的等待条、显示Card等控件选中项的位置信息等。

Sample

sample实现类似手机屏幕切换效果,是主要是通过card,dotIndicatorpanel这几个控件实现。

控件布局:

sample布局

  • carddotIndicator的属性如下:

sample布局

其中card的调用属性中,给bindchange设置为onChange,之后我们会在JS代码中实现该函数。

在Page中添加carddotIndicator,再往card中添加3个panel,每个panel中放一个ImageBox(可根据自身需求增加多个其他控件),并自定义UI风格。

JS代码

    onChange : function(event){
        // DotIndicator控件,随着card控件显示项的改变而改变
        this.setData({DotIndicator1 : {value : event.detail.value, refresh: true}})
    },

效果

sample

DotIndicator 属性

公共属性

  • 控件类型

    默认dotIndicator,且不可改动

  • 透明度

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

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

名称

  • 控件名称

    设定控件的名称。

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

设计

  • 控件锁定

    选项:True/False

    设定该控件是否锁定。

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

  • 是否隐藏控件

    选项:True/False

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

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

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

图片

  • 背景图片

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

外观

  • 背景颜色

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

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

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

  • 当前点图片

    设定当前点的图片

  • 方向

    选项:水平/垂直

    设置控件的布局方向。

  • 间隙

    设定每个点之间的间隔

  • 选中项

    设定初始当前点的序号。

  • 正常点图片

    设定非当前点的图片。

  • 点数

    设定控件内点的个数

位置属性

  • x坐标点

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

  • y坐标点

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

  • 高度

    设定控件的高度

  • 宽度

    设定控件的宽度

    setData

  • 控件自有属性

    属性名 类型 描述 注解
    selectDot Number DotIndicator控件选中点 值从 0 开始
  • setData 设置更改属性示例

    示例代码 注解
    this.setData({dotIndicator1 : 1}) iddotIndicator1 的 DotIndicator 控件的选中点置为 1,即第2个点
    this.setData({dotIndicator1 : {value : 1}}) iddotIndicator1 的 DotIndicator 控件的选中点置为 1,即第2个点