Tantalum UI

Appearance

Return to top
On this page

IndexView/IndexViewItem 索引栏

vue
<template>
  <ta-group title="基础用法">
    <!-- <div class="scroll-tab-header">占位头部</div> -->
    <ta-index-view
      v-model="value"
      ref="indexViewRef"
      :stickyOffsetTop="offsetTop"
      @change="onChange"
    >
      <ta-index-view-item :name="item" v-for="item in indexList" :key="item">
        <ta-cell label="单元格"></ta-cell>
        <ta-cell label="单元格"></ta-cell>
        <ta-cell label="单元格"></ta-cell>
        <ta-cell label="单元格"></ta-cell>
        <ta-cell label="单元格"></ta-cell>
      </ta-index-view-item>
    </ta-index-view>
  </ta-group>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import type { IndexViewOnChange, IndexViewRef } from '@/index'

export default defineComponent({
  name: 'ExpIndexView',
  setup() {
    const value = ref()
    const indexViewRef = ref<IndexViewRef | null>(null)

    const onChange: IndexViewOnChange = res => {
      console.log('change', res)
    }

    onMounted(() => {
      // indexViewRef.value?.scrollToIndex(2)
    })

    return {
      value,
      indexViewRef,

      offsetTop: 52,
      indexList: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''),

      onChange
    }
  }
})
</script>

Import

js
import { TaIndexView, TaIndexViewItem } from 'tantalum-ui-mobile'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

ts
import type { IndexViewOnChange, IndexViewRef } from 'tantalum-ui-mobile'

IndexView

IndexView Props

属性类型默认值必填说明
sticky-offset-topstring | number0否数值默认是 px，也支持 vw/vh

IndexView Events

事件描述回调函数参数TypeScript 函数
change切换时触发(name: string, activeIndex: number)IndexViewOnChange

Methods

ts
interface IndexViewRef {
  scrollTo: (name: string) => void
  scrollToIndex: (index: number) => void
}
方法名说明
scrollTo切换到指定 name 的 Item
scrollToIndex切换到指定 index 的 Item

IndexView Slots

#default

注：其中只可放置 IndexViewItem 组件，否则会导致未定义的行为。

vue
<ta-index-view>
  <ta-index-view-item name="A">
    <ta-cell label="单元格" />
    <ta-cell label="单元格" />
    <ta-cell label="单元格" />
  </ta-index-view-item>
</ta-index-view>

IndexViewItem

IndexViewItem Props

属性类型默认值必填说明
namestring是唯一标识，设置后配合 IndexView 组件的 v-model 和 change 使用
titlestring否分组名，也应用于吸附侧边栏，如果没有设置则获取 name 的值

IndexViewItem Slots

#default

vue
<ta-index-view-item name="A">
  <ta-cell label="单元格" />
  <ta-cell label="单元格" />
  <ta-cell label="单元格" />
</ta-index-view-item>