Skip to main content
版本:v1.0

CYCLE_IMAGE_TEXT_LIST

cycle_image_text_list_sample

创建一个可以循环滚动的列表,其中可以填充图片和文字。

创建 UI 控件​

const cycleImageTextList = hmUI.createWidget(hmUI.widget.CYCLE_IMAGE_TEXT_LIST, Param)
警告

现阶段此控件的图片路径解析存在问题,无法正确显示图片,只可设置文字相关属性

类型​

Param: object​

属性说明是否必须类型
x控件 x 坐标是number
y控件 y 坐标是number
w控件显示宽度是number
h控件显示高度是number
item_image_xitem 图片 x 坐标,相对坐标是number
item_image_yitem 图片 y 坐标,相对坐标是number
item_text_xitem 字体 x 坐标,相对坐标是number
item_text_yitem 字体 y 坐标,相对坐标是number
item_text_sizeitem 字体大小是number
item_text_coloritem 字体颜色是number
item_bg_coloritem 背景色是number
item_heightitem 高度是number
data_array数据数组是Array<Data>
data_size数组长度是number
item_text_align_h文字横轴方向,不填默认横向居中否number
item_text_align_v文字竖轴方向,不填默认竖向居中否number
item_text_height文本实际显示区域,不填则默认为 item_height否number
item_text_width文本实际显示区域,不填则默认为控件显示宽度否number
item_click_func点击 item 的回调否ItemClickFunc

Data: object​

属性说明是否必填类型
src图片路径否string
text文本内容是string

ItemClickFunc: function​

(cycleList: CycleList, index: number) => void
参数类型备注
cycleListobjectcycleList 实例
indexnumber点击的 item 索引 从 0 开始

设置单个 item 文字的属性​

警告

设置单个 item 文字的属性,控件并不会保存这些信息,通过 getProperty 无法获取变更后的值

属性说明是否必填类型
indexitem 索引 从 0 开始是number
item_text_color文本颜色否number
item_text_size文本大小否number
const widget = ...
widget.setProperty(hmUI.prop.ITEM_MORE,{
index: 0,
item_text_color: 0x2f4988,
item_text_size: 50
})

刷新 ITEM​

  • 这里是为 ITEM_MORE 这个属性设置的 通过 ITEM_MORE 设置属性后 如果想恢复原样 可以调刷新 ITEM
widget.setProperty(hmUI.prop.ITEM_REFRESH, 0) // 0 是 item 索引,从 0 开始

设置 list 的顶部 item 索引​

  • 通过 LIST_TOP 属性设置 list 的顶部 item 的索引值,以便将 list 显示在指定位置的 item
字段名说明是否必填类型
indexitem 索引 从 0 开始是number

代码示例​

const dataArray = [
{ text: '0' },
{ text: '1' },
{ text: '2' },
{ text: '3' },
{ text: '4' },
{ text: '5' },
{ text: '6' },
{ text: '7' },
{ text: '8' },
{ text: '9' }
]

cycleImageTextList = hmUI.createWidget(hmUI.widget.CYCLE_IMAGE_TEXT_LIST, {
x: 0,
y: 0,
w: 480,
h: 300,
data_array: dataArray,
data_size: 10,
item_height: 50,
item_text_color: 0xffffff,
item_text_size: 18
})

// 获取滚动列表顶部的索引
result = cycleImageTextList.getProperty(hmUI.prop.MORE, {})
console.log(result.index)

// 设置滚动列表顶部的索引
cycleImageTextList.setProperty(hmUI.prop.LIST_TOP, { index: 3 })