list

The <list> component provides a list container that presents a series of list items arranged in a column with the same width. It supports presentations of the same type of data in a multiple and coherent row style, for example, images or text.

NOTE

This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.

Child Components

Only <list-item> is supported.

Attributes

Name	Type	Default Value	Mandatory	Description
id	string	-	No	Unique ID of the component.
style	string	-	No	Style declaration of the component.
class	string	-	No	Style class of the component, which is used to refer to a style table.
ref	string	-	No	Reference information of child elements, which is registered with the parent component on $refs.

Events

Name	Parameter	Description
scrollend	-	Triggered when the list stops scrolling.
click	-	Triggered when the list is clicked.
longpress	-	Triggered when the list is long pressed.
swipe⁵⁺	SwipeEvent	Triggered when a user quickly swipes on the list.
scrolltop⁸⁺	-	Triggered when the list is scrolled to the top.
scrollbottom⁸⁺	-	Triggered when the list is scrolled to the bottom.

Styles

Name	Type	Default Value	Mandatory	Description
flex-direction	string	column	No	Main axis direction of the flex container. It specifies how items are placed in the flex container. - column: Items are placed vertically from top to bottom. - row: Items are placed horizontally from left to right. For the <list> component, the default value is column. For other components, the default value is row. Dynamic modification is not supported.
width	<length> \| <percentage>⁵⁺	-	No	Component width. If this attribute is not set, the default value 0 is used.
height	<length> \| <percentage>⁵⁺	-	No	Component height. If this attribute is not set, the default value 0 is used.
padding	<length>	0	No	Shorthand attribute to set the padding for all sides. The attribute can have one to four values: - If you set only one value, it specifies the padding for all the four sides. - If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding. - If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding. - If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).
padding-[left\|top\|right\|bottom]	<length>	0	No	Left, top, right, and bottom padding.
margin	<length> \| <percentage>⁵⁺	0	No	Shorthand attribute to set the margin for all sides. The attribute can have one to four values: - If you set only one value, it specifies the margin for all the four sides. - If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins. - If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin. - If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).
margin-[left\|top\|right\|bottom]	<length> \| <percentage>⁵⁺	0	No	Left, top, right, and bottom margins.
border-width	<length>	0	No	Shorthand attribute to set the margin for all sides.
border-color	<color>	black	No	Shorthand attribute to set the color for all borders.
border-radius	<length>	-	No	Radius of round-corner borders.
background-color	<color>	-	No	Background color.
opacity⁵⁺	number	1	No	Opacity of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.
display	string	flex	No	How and whether to display the box containing an element. Available values are as follows: - flex: flexible layout - none: not rendered
[left\|top]	<length> \| <percentage>⁶⁺	-	No	Edge of the element. - left: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block. - top: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.

Methods

Name	Parameter	Description
scrollTo	{ index: number(position) }	Scrolls the list to the position of the item at the specified index.

Example

<!-- index.hml -->
<div class="container">
  <list class="todo-wraper">
    <list-item for="{{todolist}}" class="todo-item">
      <text class="todo-title">{{$item.title}}</text>
      <text class="todo-title">{{$item.date}}</text>
    </list-item>
  </list>
</div>

// index.js
export default {
  data: {
    todolist: [{
      title: 'Prepare for the interview',
      date: '2021-12-31 10:00:00',
    }, {
      title: 'Watch the movie',
      date: '2021-12-31 20:00:00',
    }],
  },
}

/* index.css */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0px;
  top: 0px;
  width: 454px;
  height: 454px;
}
.todo-wraper {
  width: 454px;
  height: 300px;
}
.todo-item {
  width: 454px;
  height: 80px;
  flex-direction: column;
}
.todo-title {
  width: 454px;
  height: 40px;
  text-align: center;
}

list