目录

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 data in a multiple and coherent row style, for example, images or text.

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

Child Components

Only the <list-item> child component 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 component is clicked.
longpress - Triggered when the component is long pressed.
swipe5+ SwipeEvent Triggered when a user quickly swipes on the component.
scrolltop8+ - Triggered when the list is scrolled to the top.
scrollbottom8+ - 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 on lite wearables.
width <length> | <percentage>5+ - No

Component width.

If this attribute is not set, the default value 0 is used.
height <length> | <percentage>5+ - 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>5+ 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>5+ 0 No Left, top, right, and bottom margins.
border-width <length> 0 No Shorthand attribute to set the border width for all sides.
border-color <color> black No Shorthand attribute to set the color for all borders.
border-radius <length> - No Radius of border corners.
background-color <color> - No Background color.
opacity5+ 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

Whether to display a box containing the element and the layout for its child elements. Available values are as follows:

- flex: flexible layout

- none: not rendered
[left|top] <length> | <percentage>6+ - No

Edge of the element.

- The left attribute specifies the 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.

- The top attribute specifies the 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.
rotation { focus: boolean } Specifies whether to request focus for crown rotation. focus: true: acquires focus, allowing users to scroll options by rotating the crown (only works for single-column pickers). focus: false: releases focus.

Example

<!-- index.hml -->
<div class="container">
    <list class="todo-wrapper" ref="listObj">
        <list-item for="{{todolist}}" class="todo-item">
            <div style="width: 454px;height: 80px;flex-direction: column;align-items: center;justify-content: center;">
                <text class="todo-title">{{$item.title}}</text>
                <text class="todo-title">{{$item.date}}</text>
            </div>
        </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',
        }
        , {
            title: 'Read a book',
            date: '2021-12-31 21:00:00',
        },
        {
            title: 'Take a shower',
            date: '2021-12-31 22:00:00',
        },
        {
            title: 'Sleep',
            date: '2021-12-31 23:00:00',
        }],
    },
    onShow() {
        this.$refs.listObj.rotation({focus: true})
    },
    onHide() {
        this.$refs.listObj.rotation({focus: false})
    }
}
/* index.css */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0px;
  top: 0px;
  width: 454px;
  height: 454px;
}
.todo-wrapper {
  width: 454px;
  height: 500px;
}
.todo-item {
  width: 454px;
  height: 80px;
  flex-direction: column;
}
.todo-title {
  width: 454px;
  height: 40px;
  text-align: center;
}