list

列表视图容器，仅支持<list-item>子组件，支持通用属性，支持通用样式

基础示例

完整单页示例，可直接替换 BlueOS Studio 模板工程的首页 index.ux 运行。列表数据声明在 data 中，通过 for="{{(index, item) in items}}" 渲染 <list-item>，并用 tid="id" 指定稳定标识以复用节点。

<script>
  export default {
    data: {
      selected: '未选择',
      items: [
        { id: 'heart', name: '心率', value: '72 次/分' },
        { id: 'step', name: '步数', value: '5210 步' },
        { id: 'sleep', name: '睡眠', value: '7 小时 20 分' },
      ],
    },
    selectItem(item) {
      this.selected = item.name
    },
  }
</script>

<template>
  <div class="flex flex-col w-full">
    <text class="text-white text-2xl">当前选择：{{ selected }}</text>
    <list class="w-full mt-20">
      <list-item class="w-full" type="metric" for="{{(index, item) in items}}" tid="id" onclick="selectItem(item)">
        <div class="flex flex-row items-center justify-between w-full px-20 py-16">
          <text class="text-white text-2xl">{{ index + 1 }} {{ item.name }}</text>
          <text class="text-white text-2xl">{{ item.value }}</text>
        </div>
      </list-item>
    </list>
  </div>
</template>

<style>
@tailwind utilities;
</style>

注意三点：for 的循环变量顺序固定为 (index, item)；事件绑定中直接写循环变量名 selectItem(item)，不要写成 selectItem({{item}})；相同 type 的 <list-item> 必须具备完全一致的 DOM 结构。

属性

名称	类型	默认值	必填	描述
type	normal|fisheye|grid	normal	否	设置列表的的布局方式，默认为普通的 list 布局；fisheye 是类似鱼眼镜头效果布局；grid 是网格布局。该属性不可动态变更
scrollbar	<boolean>	false	否	是否启用滚动条
title	<boolean>	false	否	值为 true 的第一个元素将会作为 list 的标题，标题位置固定在 list 开头，向上滑动时标题会渐渐消失（透明度逐渐变为完全透明)
circular	<boolean>	false	否	是否循环展示 , 值为 true 时部分滚动事件不可用。
alignmentnum	<number>	3	否	鱼眼 list 一屏幕 对齐数量，type 为 fisheye 时生效，设置范围：3-7，超出范围则自动设置为默认值
bounces	<boolean>	true	否	是否启用回弹

样式

名称	类型	默认值	必填	描述
flex-direction	column	row	column	否
columns	<number>	1	否	list 显示列数

事件

名称	参数	描述
scrollbottom	-	列表滑动到底部
scrolltop	-	列表滑到到顶部
scrollindex	{first, last}	返回 list 可视范围的索引范围。first:可视范围第一个 item 的索引；last:可视范围最后一个 item 的索引。

方法

名称	参数	描述
scrollTo	Object	list 滚动到指定 item 位置

scrollTo 的参数说明:

名称	类型	是否必选	默认值	备注
index	number	是	无	list 滚动的目标 item 位置
behavior	smooth	instant	auto	否