CYCLE_LIST

Start from API_LEVEL 2.0 . Please refer to API_LEVEL.

Create a list that scrolls in a loop, which can be populated with images.

Create UI widget

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

const cycleList = createWidget(widget.CYCLE_LIST, Param)

Type

Param: object

Properties	Description	Required	Type
item_bg_color	Background color.	YES	number
item_height	The height of item.	YES	number
x	The x-coordinate of widgets.	YES	number
y	The y-coordinate of widgets.	YES	number
w	The width of widgets.	YES	number
h	The height of widgets.	YES	number
data_array	Data arrays.	YES	Array<Data>
data_size	The length of the array.	YES	number
item_click_func	Callback for item click.	NO	ItemClickFunc
item_focus_change_func	Item focus state callback.	NO	ItemFocusChangeFunc

ItemClickFunc: function

(cycleList: CycleList, index: number) => void

Properties	Type	Notes
cycleList	object	The instance of cycleList.
index	number	Clicked item index.Starting from 0.

ItemFocusChangeFunc: function

(cycleList: CycleList, index: number, isFocus: boolean) => void

参数	说明	类型
cycleList	The instance of cycleList.	object
index	Losing/getting the index of the focus item.	number
isFocus	Whether to get the focus.	boolean

Code example

tip

Please refer to Design Resources for the image resources in the code example

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

Page({
  state: {
    pageName: 'CYCLE_LIST'
  },

  build() {
    const imgArray = ['number-img/0.png', 'number-img/1.png', 'number-img/2.png', 'number-img/3.png', 'number-img/4.png']
    const cycleList = createWidget(widget.CYCLE_LIST, {
      x: 230,
      y: 120,
      h: 300,
      w: 30,
      data_array: imgArray,
      data_size: 5,
      item_height: 100,
      item_click_func: (list, index) => {
        console.log(index)
      },
      item_bg_color: 0xffffff
    })
  }
})

Additional Examples

Example 1

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

const imgListStyleObj = {
  data_array: imgArray,
  data_size: 11,
  item_bg_color: 0x0007f,
  layout: {
    width: '20vw',
    height: '65vh',
    item_height: '13vh',
  },
}

const rootContainer = createWidget(widget.VIRTUAL_CONTAINER, {
  layout: { x: '0vw', y: '0vh', width: '100vw', height: '70vh' },
})

const groupRoot = createWidget(widget.GROUP, {
  parent: rootContainer,
  layout: {
    display: 'flex',
    'flex-flow': 'row wrap',
    'column-gap': '20',
    'row-gap': '10',
    'justify-content': 'space-evenly',
    'align-items': 'center',
    width: '100%',
    height: '100%',
  },
})

for (let i = 0; i < 3; i += 1) {
  groupRoot.createWidget(widget.CYCLE_LIST, imgListStyleObj)
}