列表

The List tag is used to display a list of similar items like articles, search results, etc. Task data in the value parameter should be an array of objects with id, title, body, and html fields.

使用List比分组其他标签（如Text）要轻量得多。此外，您还可以附加分类以提供有关此列表的额外数据。

List标签可与Ranker标签配合使用，用于对列表项进行排序或从中选取相关项。 可通过.htx-ranker-item类在Style标签中对列表项进行样式设置。

参数

参数	类型	描述
name	string	Name of the element
value	string	Data field containing a JSON with array of objects (id, title, body) to rank
[title]	string	Title of the list

示例

视觉外观可以通过带有这些类名的Style标签进行更改

<View>
  <Style>
    .htx-ranker-column { background: cornflowerblue; }
    .htx-ranker-item { background: lightgoldenrodyellow; }
  </Style>
  <List name="results" value="$items" title="Search Results" />
</View>

示例

List标签的示例数据

{
  "items": [
    { "id": "blog", "title": "10 tips to write a better function", "body": "There is nothing worse than being left in the lurch when it comes to writing a function!" },
    { "id": "mdn", "title": "Arrow function expressions", "body": "An arrow function expression is a compact alternative to a traditional function" },
    { "id": "wiki", "title": "Arrow (computer science)", "body": "In computer science, arrows or bolts are a type class..." }
  ]
}

示例

List标签的示例数据

{
  "items": [
     { "id": "blog", "title": "Image 1", "html": "<img src='http://example.com/1.jpg'>" },
     { "id": "mdn", "title": "Image 2", "html": "<img src='http://example.com/2.jpg'>" }
   ]
}