PAGE_INDICATOR
API_LEVEL
2.0
开始支持,API 兼容性请参考 API_LEVEL。
当使用 @zos/page setScrollMode
方法将页面设置为 Swiper 滚动模式,在页面创建指示器控件用来表示页面总数量和指示当前停留的页面。
创建 UI 控件
import { createWidget, widget } from '@zos/ui'
const pageIndicator = createWidget(widget.PAGE_INDICATOR, Param)
类型
Param: object
属性 | 说明 | 是否必须 | 类型 |
---|---|---|---|
x | 控件 x 坐标 | 是 | number |
y | 控件 y 坐标 | 是 | number |
w | 控件显示宽度 | 是 | number |
h | 控件显示高度 | 是 | number |
align_h | 水平对齐方式(值见 ALIGN) | 否 | ALIGN |
h_space | 水平间距 | 否 | number |
select_src | 指示器当前页高亮图片路径,资源存放路径参考 目录结构 | 是 | string |
unselect_src | 指示器非当前页图片路径,资源存放路径参考 目录结构 | 是 | string |
ALIGN 对齐方式
值 | 说明 |
---|---|
align.LEFT | 横轴-左对齐 |
align.RIGHT | 横轴-右对齐 |
align.CENTER_H | 横轴-居中 |
代码示例
import { createWidget, widget, align } from '@zos/ui'
import { setScrollMode, SCROLL_MODE_SWIPER_HORIZONTAL } from '@zos/page'
import { px } from '@zos/utils'
Page({
build() {
const itemCount = 10
const pageSize = px(480)
setScrollMode({
mode: SCROLL_MODE_SWIPER_HORIZONTAL,
options: {
height: pageSize,
count: itemCount
}
})
const pageIndicator = createWidget(widget.PAGE_INDICATOR, {
x: 0,
y: px(470),
w: px(480),
h: px(10),
align_h: align.CENTER_H,
h_space: 8,
select_src: 'images/test/select/select.png',
unselect_src: 'images/test/select/unselect.png'
})
for (let i = 0; i < itemCount; i++) {
let xPos = 0
let yPos = px(400) + pageSize * i
createWidget(widget.TEXT, {
x: xPos,
y: yPos,
w: px(480),
h: px(120),
text_size: 35,
color: 0xffffff,
align_h: align.CENTER_H,
text: `PAGE ${i}`
})
}
}
})