PAGE_INDICATOR

Start from API_LEVEL 2.1 . Please refer to API_LEVEL.

When a page is set to Swiper scroll mode using the @zos/page setScrollMode method, an indicator control is created on the page to indicate the total number of pages and to indicate which page is currently stopped.

Create UI widget

import { createWidget, widget } from '@zos/ui'

const pageIndicator = createWidget(widget.PAGE_INDICATOR, Param)

Type

Param: object

Properties	Description	Required	Type	API_LEVEL
x	The x-axis coordinate of the widget.	YES	number	2.1
y	The y-axis coordinate of the widget.	YES	number	2.1
w	The width of the widget.	YES	number	2.1
h	The height of the widget.	YES	number	2.1
align_h	The alignment of the horizontal axis (see ALIGN for values).	NO	ALIGN	2.1
h_space	Horizontal spacing	NO	number	2.1
v_space	Vertical spacing	NO	number	3.0
select_src	Indicator current page highlight image path, resource storage path reference Folder Structure	YES	string	2.1
unselect_src	Indicator non-current page highlight image path, resource storage path reference Folder Structure	YES	string	2.1
horizontal	Horizontal or not, default is true, set false for vertical layout	NO	boolean	3.0

ALIGN alignment

Value	Description
align.LEFT	Horizontal axis-left aligned.
align.RIGHT	Horizontal axis-align right.
align.CENTER_H	Horizontal axis-centered.

Code Example

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}`
      })
    }
  }
})