IndexBar 序列

可通过索引检索的序列

示例

基础用法

<script lang="ts">
  import _province from '@province-city-china/province'
  import _city from '@province-city-china/city'

  const provinceAbbrByCode = {
    '11': '京', // 北京市
    '12': '津', // 天津市
    '13': '冀', // 河北省
    // ...
  } as Record<string, string>
</script>

<Page class="overflow-hidden bg-gray-100">
  <IndexBar>
    {#each _province as province}
      <!-- 提供省的缩写作为 data-index 的值 -->
      <List
        header={province.name}
        data-index={provinceAbbrByCode[province.province]}
      >
        {@const cities = _city.filter(x => x.province === province.province)}
        {#if cities.length}
          {#each _city.filter(x => x.province === province.province) as city}
            <ListItem icon="none" clickable>{city.name}</ListItem>
          {/each}
        {:else}
          <ListItem icon="none" clickable>{province.name}</ListItem>
        {/if}
      </List>
    {/each}
  </IndexBar>
</Page>

IndexBar 会扫描第一级子元素，提取其 data-index 属性并作为索引。未提供 data-index 的元素会被忽略。

注意：请勿提供重复的 data-index 值。这会导致索引指向错误。

IndexBar

属性

属性	说明	类型	默认值
index	当前锚点位置	string	$bindable()

子元素属性

属性	说明	类型	默认值
data-index	定义子元素的索引值	string	必填