代码拉取完成，页面将自动刷新
同步操作将从 OpenHarmony/docs 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
The <list> component provides a list container that presents a series of list items arranged in a column with the same width. Lists support presentations of the same data in a multiple and coherent row style, for example, images and texts.
None
<list-item> and <list-item-group>
|
Whether to scroll the non-list part on the top of the list page out of the visible area with the list. The value can be true (scrolls the non-list part out) or false (does not scroll the non-list part out). This attribute is not available when the direction is row. |
||||
|
Minimum number of cached list items when the long list is loaded with delay. When the number of list items cached outside the visible area is less than the value of this attribute, a requestitem event is triggered. |
||||
|
Display mode of the side scroll bar. (Currently, only the vertical scroll bar is supported.) |
||||
|
Scroll effect. Available values are as follows:
|
||||
|
Whether to display the alphabetical index bar on the sidebar. If this attribute is set to true or a customized indexer, the index bar is displayed at the right boundary of the list. Example: "indexer" : "true" indicates the default alphabetical indexer. "indexer" : "false" indicates no indexer. "indexer": ["#", "A", ".", "E", ".", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] indicates a customized indexer. You must include "#" when using a customized indexer.
NOTE:
|
||||
|
Whether to display the bubble effect when switching among indexes. |
||||
|
Whether list items are separated by dividers. For details about divider styles, see divider-color, divider-height, divider-length, and divider-origin in the Styles table. |
||||
|
Whether a dynamic effect is displayed when an item in the list is deleted or added. |
||||
|
Whether to display chained animations on this list when it slides or its top and bottom are dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics. |
||||
|
Item to be displayed at the start position of the viewport when the current list is loaded for the first time. The default value is 0, indicating that the first item is displayed. The setting does not take effect in any of the following cases: |
||||
|
Start offset of the viewport when the current list is loaded for the first time. The offset must not exceed the scrolling range of the current list. If exceeded, the offset is truncated to the maximum value of the scrolling range. This attribute does not take effect if indexer or scrollpage is set to true. |
||||
|
Selected item in the current list. The value can be a section value of any list items. |
||||
|
Style class of a component, which is used to refer to a style table. |
||||
|
Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs. |
||||
|
Whether a component is disabled. If it is disabled, it cannot respond to user interaction. |
||||
|
Attribute set for a component to facilitate data storage and reading. |
|
Item divider color. This style is valid only when the divider attribute of <list> is set to true. |
||||
|
Item divider height. This style is valid only when the divider attribute of <list> is set to true. |
||||
|
Item divider length. If this style is not set, the maximum length is the width of the main axis, and the actual length depends on the divider-origin parameter. This style is valid only when the divider attribute of the list is set to true. |
||||
|
Item divider offset relative to the start point of the main axis. This style is valid only when the divider attribute of the list is set to true. |
||||
|
Main axis direction of the flex container. It specifies how items are placed in the flex container. For the <list> component, the default value is column. For other components, the default value is row. |
||||
|
Number of columns displayed in the cross axis direction of the list. The default value is 1. |
||||
|
Alignment of items in each column on the cross axis. Available values are as follows: |
||||
|
Size of an internal item. When a percentage is set, the value indicates the percentage of the length in the main axis direction relative to the list viewpoint. |
||||
|
Color of the physical dynamic effect. This attribute is valid only when scrolleffect is set to fade. |
||||
|
If this attribute is not set, the width required for the element content is used. |
||||
|
If this length attribute is not set, the length required for the element content is used. |
||||
|
Shorthand attribute to set all padding attributes.
The attribute can have one to four values:
|
||||
|
Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:
|
||||
|
Shorthand attribute to set all borders. You can set border-width, border-style, and border-color in sequence. Default values are used for attributes that are not set. |
||||
|
Shorthand attribute to set the style for all borders. Available values are as follows: |
||||
|
Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid. |
||||
|
Shorthand attribute to set the borders for every side respectively. You can set border-width, border-style, and border-color in sequence. Default values are used for attributes that are not set. |
||||
|
Shorthand attribute to set the width of all borders, or separately set the width of each border. |
||||
|
Attribute to set widths of left, top, right, and bottom borders. |
||||
|
Shorthand attribute to set the color of all borders, or separately set the color of each border. |
||||
|
Attribute to set colors of left, top, right, and bottom borders. |
||||
|
Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time. |
||||
|
Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners |
||||
|
This attribute supports Gradient Styles only but is not compatible with background-color or background-image. |
||||
|
Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported. |
||||
|
|
|||
|
How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically. |
||||
|
|
|||
|
Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent. |
||||
|
How and whether to display the box containing an element. Available values are as follows: |
||||
|
Whether to display an element. Invisible borders occupy layout space. (To remove the borders, set the display attribute to none.) Available values are as follows: |
||||
|
How to divide available space of the parent component for a child component. You can set one, two5+, or three5+ values for this style. Set one value in either of the following ways: Set two values5+ in the following ways: The first value must be a unitless number used to set flex-grow. The second value must be either of the following: Set three values5+ in the following ways: The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis. |
||||
|
How much a child component will grow. The value specifies allocation of the remaining space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value 0 indicates that the child component does not grow. |
||||
|
How much a child component will shrink. The shrink occurs only when the sum of default child component widths is greater than that of the parent component. Value 0 indicates that the child component does not shrink. |
||||
|
Positioning type of an element. Dynamic changes are not supported. |
||||
|
left|top|right|bottom must be used together with position to determine the offset position of an element.
|
|
Scrolls the list to the position of the item at the specified index. |
||
|
If smooth is set to false (default value), the list is directly scrolled to the top. If smooth is set to true, the list is smoothly scrolled to the top. |
||
|
If smooth is set to false (default value), the list is directly scrolled to the bottom. If smooth is set to true, the list is smoothly scrolled to the bottom. |
||
|
If reverse is set to false (default value), the next page is displayed. If there is no next page, the list scrolls to the bottom. If reverse is set to true, the previous page is displayed. If there is no previous page, the list scrolls to the top. If smooth is set to false (default value), the list is directly scrolled to another page. If smooth is set to true, the list is smoothly scrolled to another page. |
||
|
If reverse is set to false (default value), the list scrolls towards the bottom for a certain distance. If there is no sufficient distance, the list scrolls to the bottom. If reverse is set to true, the list scrolls towards the top for a certain distance. If there is no sufficient distance, the list scrolls to the top. If smooth is set to false (default value), the list is directly scrolled. |
||
|
Returns the offset of the current scrolling. The return value type is Object. For details, see Table 2. |
Table 1 ListScrollByOptions
Table 2 Attributes of the currentOffset return object
<!-- 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: 'Dec 31, 2021 10:00:00',
}, {
title: 'Watch the movie',
date: 'Dec 31, 2021 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;
}
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。