SCROLL_LIST

Start from API_LEVEL 2.0. Please refer to API_LEVEL.

Create a list area with sliding support, where each list item can contain images and text, and supports horizontal sliding.

Create UI widget

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

const scrollList = createWidget(widget.SCROLL_LIST, Param)

Type

Param: object

Properties	Description	Required	Type	API_LEVEL
x	The x-coordinate of the widget	YES	number	2.0
y	The y-coordinate of the widget	YES	number	2.0
w	Width of the widget	YES	number	2.0
h	Height of the widget	YES	number	2.0
item_space	Space between items	NO	number	2.0
item_config	Item type configuration, see ItemConfig	YES	Array<ItemConfig>	2.0
item_config_count	Length of the item_config array	YES	number	2.0
data_array	Data array	YES	DataArray	2.0
data_count	Length of the data array	YES	number	2.0
item_click_func	Item click callback function, see ItemClickFunc	NO	ItemClickFunc	2.0
data_type_config	Item index type configuration array, see DataTypeConfig	NO	Array<DataTypeConfig>	2.0
data_type_config_count	Length of the item index type configuration array	NO	number	2.0
on_page	Used when updating data, set to 1 to keep the list at current position after update, otherwise returns to list top	NO	number	2.0
snap_to_center	Whether the list should snap to the center height of SCROLL_LIST	NO	boolean	2.0
item_focus_change_func	List sliding focus change callback function, see ItemFocusChangeFunc	NO	ItemFocusChangeFunc	2.0
item_enable_horizon_drag	Whether items can be dragged horizontally	NO	boolean	2.0
item_drag_max_distance	Maximum horizontal drag distance, positive values for left drag, negative for right drag	NO	number	2.0
snap_type	Set snap mode (see snap_type snap mode)	NO	number	4.0
item_common_focus	Whether to show common focus (effective in key mode)	NO	boolean	4.0
item_key_focus_change_func	Key event listener callback in key mode	NO	function	4.0
enable_scroll_bar	Create page indicator (arcScrollBar)	NO	boolean	4.0
view_index	Set list item to visible area (Note: Round screen: center screen, Square screen: top of screen)	NO	number	4.0

ItemConfig: object

Properties	Description	Required	Type
type_id	Current item type ID, optional when item_config_count is 0, required otherwise	NO	number
item_height	Item height	YES	number
item_bg_color	Item background color	YES	number
item_bg_radius	Item background corner radius	YES	number
text_view	Array of textView structures, each item is a textView, see explanation below	NO	Array<TextView>
text_view_count	Length of text_view array	NO	number
image_view	Array of imageView, each item is an imageView, see explanation below	NO	Array<ImageView>
image_view_count	Length of image_view array	NO	number

TextView: object

Properties	Description	Required	Type
x	The x-coordinate, relative coordinate	YES	number
y	The y-coordinate, relative coordinate	YES	number
w	Widget width	YES	number
h	Widget height	YES	number
color	Text color	NO	number
text_size	Font size	NO	number
key	Data binding key, see examples and data_array description for details	YES	string
action	Whether to respond to click events, after response, the corresponding data key can be captured in item_click_func, default false	NO	boolean

const text_view = [
  { x: 100, y: 0, w: 100, h: 20, key: 'name', color: 0xffffff, action: true },
  { x: 0, y: 30, w: 100, h: 100, key: 'age', color: 0xffffff, text_size: 20 }
]

ImageView: object

Properties	Description	Required	Type
x	The x-coordinate, relative coordinate	YES	number
y	The y-coordinate, relative coordinate	YES	number
w	Widget width	YES	number
h	Widget height	YES	number
key	Data binding key, see examples and data_array description for details	YES	string
action	Whether to respond to click events, after response, the corresponding data key can be captured in item_click_func, default false	NO	boolean

// Each structure in the array is an imageView
const image_view = [{ x: 0, y: 0, w: 20, h: 20, key: 'img_src', action: true }]

### data_array

Data arrays, TextView and ImageView take values from each data_array object based on property names (configured via `key`) and render them to the view based on the corresponding configuration.

```js
const dataList = [
  { img_src: rootPath + 'step/step_num_1.png', name: 'name1', age: '12' },
  { img_src: rootPath + 'step/step_num_1.png', name: 'name1', age: '13' },
  { img_src: rootPath + 'step/step_num_1.png', name: 'name1', age: '13' }
]

DataTypeConfig: object

Set the type of list index item.

Each index item uses the configuration of item_config[0] by default.

Properties	Description	Required	Type
start	Starting index	YES	number
end	Ending index	YES	number
type_id	The type_id corresponding to the type configuration in item_config	YES	number

start and end form a closed interval [start, end]

{
data_type_config:[
  // Represents that data entries from index 0 to 2 use the style configuration with type_id 2
  {
  start: 0,
  end: 2,
  type_id: 2,
  },
  {
  start: 3,
  end: 10,
  type_id: 1,
  },
],
data_type_config_count:2
}

ItemClickFunc

(list: ScrollList, index: number, data_key: string) => void

Parameters	Description	Type
list	SCROLL_LIST widget	any
index	Clicked item index	number
data_key	Clicked data key name, can locate the clicked area through key	string

ItemFocusChangeFunc

(list: ScrollList, index: number, focus: boolean) => void

Parameters	Description	Type
list	SCROLL_LIST widget	any
index	Item index	number
focus	Whether the item is in focus state	boolean

snap_type Snap Mode

Snap Mode Enum Value	Description
SCROLL_LIST.snap_type.SNAPCENTER_ALL	Center snap
SCROLL_LIST.snap_type.SNAPCENTER_EXCEPTTITLE	Center snap except for title
SCROLL_LIST.snap_type.SNAP_TOP	Top snap
SCROLL_LIST.snap_type.SNAP_BOTTOM	Bottom snap

import { SCROLL_LIST } from '@zos/ui'

console.log(SCROLL_LIST.snap_type.SNAPCENTER_ALL)

Refresh Data

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

const scrollList = createWidget(widget.SCROLL_LIST, Param)
scrollList.setProperty(prop.UPDATE_DATA, {
  // Reset configuration information
  data_type_config: [
    {
      start: 0,
      end: 2,
      type_id: 2
    }
  ],
  // Configuration information length
  data_type_config_count: 1,
  // New data
  data_array: [
    { img_src: rootPath + 'test/normalbtn_h.png', name: 'Name', age: '12', like: 'type2' },
    { img_src: rootPath + 'test/normalbtn_h.png', name: 'namex1', age: '13', like: 'type2' },
    { img_src: rootPath + 'test/normalbtn_h.png', name: 'namex2', age: '13', like: 'type2' },
    { img_src: rootPath + 'test/normalbtn_h.png', name: 'namex3', age: '12', like: 'type2' },
    { img_src: rootPath + 'test/normalbtn_h.png', name: 'name666', age: '13', like: 'type2' }
  ],
  // Data length
  data_count: 5,
  // Stay on current page after data refresh, if not set or set to 0, it will return to the top of the list
  on_page: 1
})

Update/Delete Single Item

// Update a specific data
scrollList.setProperty(prop.UPDATE_ITEM, {
  index: gScrollListSelectIndex,
  item_data: dataList2[gScrollListSelectIndex]
})
// Delete a specific data
list.setProperty(prop.DELETE_ITEM, { index: delete_index })

Control Horizontal Sliding Parameters of Single Item

scrollList.setProperty(prop.MOVE_ITEM, {
  start: 0, // Start row
  end: 0, // End row
  item_enable_horizon_drag: false, // Whether horizontal sliding is enabled
  item_drag_max_distance: -200 // Horizontal sliding distance, only takes effect when enabled
})

Property Access Support List

属性名	setProperty	getProperty	setter	getter
x	N	Y	N	Y
y	N	Y	N	Y
w	N	Y	N	Y
h	N	Y	N	Y
item_space	N	N	N	N
item_config	N	N	N	N
item_config_count	N	N	N	N
data_array	N	N	N	N
data_count	N	N	N	N
item_click_func	N	N	N	N
data_type_config	N	N	N	N
data_type_config_count	N	N	N	N
on_page	N	N	N	N
snap_to_center	N	N	N	N
item_focus_change_func	N	N	N	N
item_enable_horizon_drag	N	N	N	N
item_drag_max_distance	N	N	N	N
snap_type	N	N	N	N
item_common_focus	N	N	N	N
item_key_focus_change_func	N	N	N	N
enable_scroll_bar	N	N	N	N
view_index	N	N	N	N

代码示例

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

Page({
  build() {
    const dataList = [
      { name: 'Amazfit T-Rex 2', size: 454, del_img: 'btn/delete.png' },
      { name: 'Amazfit GTR 3 Pro', size: 480, del_img: 'btn/delete.png' },
      { name: 'Amazfit GTR 3', size: 454, del_img: 'btn/delete.png' }
    ]

    const scrollList = createWidget(widget.SCROLL_LIST, {
      x: 0,
      y: 120,
      h: 300,
      w: 480,
      item_space: 20,
      snap_to_center: true,
      item_enable_horizon_drag: true,
      item_drag_max_distance: -120,
      item_config: [
        {
          type_id: 1,
          item_bg_color: 0xef5350,
          item_bg_radius: 10,
          text_view: [
            { x: 0, y: 0, w: 480, h: 80, key: 'name', color: 0xffffff, text_size: 20 },
            { x: 0, y: 80, w: 480, h: 40, key: 'size', color: 0xffffff }
          ],
          text_view_count: 2,
          image_view: [{ x: 492, y: 28, w: 64, h: 64, key: 'del_img', action: true }],
          image_view_count: 1,
          item_height: 120
        },
        {
          type_id: 2,
          item_bg_color: 0xef5350,
          item_bg_radius: 10,
          text_view: [
            { x: 0, y: 0, w: 480, h: 80, key: 'name', color: 0x000000, text_size: 20 },
            { x: 0, y: 80, w: 480, h: 40, key: 'size', color: 0x000000 }
          ],
          text_view_count: 2,
          image_view: [{ x: 492, y: 28, w: 64, h: 64, key: 'del_img', action: true }],
          image_view_count: 1,
          item_height: 120
        }
      ],
      item_config_count: 2,
      data_array: dataList,
      data_count: dataList.length,
      item_focus_change_func: (list, index, focus) => {
        console.log('scrollListFocusChange index=' + index)
        console.log('scrollListFocusChange focus=' + focus)
      },
      item_click_func: (item, index, data_key) => {
        console.log(`scrollListItemClick index=${index}`)
        if (data_key === 'del_img') {
          scrollList.setProperty(prop.DELETE_ITEM, { index })
          dataList.splice(index, 1)
        } else {
          updateConfig()
        }
      },
      data_type_config: [
        {
          start: 0,
          end: 1,
          type_id: 1
        },
        {
          start: 1,
          end: 2,
          type_id: 2
        }
      ],
      data_type_config_count: 2,
      snap_to_center: true,
      item_enable_horizon_drag: true,
      item_drag_max_distance: -112
    })

    function updateConfig() {
      scrollList.setProperty(prop.UPDATE_DATA, {
        data_type_config: [
          {
            start: 0,
            end: dataList.length - 1,
            type_id: 1
          }
        ],
        data_type_config_count: 1,
        data_array: dataList,
        data_count: dataList.length,
        on_page: 1
      })
    }
  }
})