IndexBar 索引栏

用于列表的索引分类显示和快速定位。

组件类型

基础用法

使用一个固定高度的元素包裹 wd-index-bar 组件，组件的宽高会和包裹元素相同。

将 wd-index-anchor 作为子组件使用，会根据 anchor 组件的 index 属性生成锚点以及侧边栏。

<template>
  <view class="wraper">
    <wd-index-bar sticky>
      <view v-for="item in data" :key="item.index">
        <wd-index-anchor :index="item.index" />
        <wd-cell border clickable v-for="city in item.data" :key="city" :title="city" @click="handleClick(item.index, city)"></wd-cell>
      </view>
    </wd-index-bar>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const data = ref([
  {
    index: 'A',
    data: ['阿坝', '阿拉善', '阿里', '安康', '安庆', '鞍山', '安顺', '安阳', '澳门']
  },
  {
    index: 'B',
    data: ['北京', '白银', '保定', '宝鸡', '保山', '包头', '巴中', '北海', '蚌埠', '本溪', '毕节', '滨州', '百色', '亳州']
  },
  {
    index: 'C',
    data: [
      '重庆',
      '成都',
      '长沙',
      '长春',
      '沧州',
      '常德',
      '昌都',
      '长治',
      '常州',
      '巢湖',
      '潮州',
      '承德',
      '郴州',
      '赤峰',
      '池州',
      '崇左',
      '楚雄',
      '滁州',
      '朝阳'
    ]
  },
  {
    index: 'D',
    data: ['大连', '东莞', '大理', '丹东', '大庆', '大同', '大兴安岭', '德宏', '德阳', '德州', '定西', '迪庆', '东营']
  },
  {
    index: 'E',
    data: ['鄂尔多斯', '恩施', '鄂州']
  },
  {
    index: 'F',
    data: ['福州', '防城港', '佛山', '抚顺', '抚州', '阜新', '阜阳']
  },
  {
    index: 'G',
    data: ['广州', '桂林', '贵阳', '甘南', '赣州', '甘孜', '广安', '广元', '贵港', '果洛']
  },
  {
    index: 'H',
    data: [
      '杭州',
      '哈尔滨',
      '合肥',
      '海口',
      '呼和浩特',
      '海北',
      '海东',
      '海南',
      '海西',
      '邯郸',
      '汉中',
      '鹤壁',
      '河池',
      '鹤岗',
      '黑河',
      '衡水',
      '衡阳',
      '河源',
      '贺州',
      '红河',
      '淮安',
      '淮北',
      '怀化',
      '淮南',
      '黄冈',
      '黄南',
      '黄山',
      '黄石',
      '惠州',
      '葫芦岛',
      '呼伦贝尔',
      '湖州',
      '菏泽'
    ]
  }
])

function handleClick(index: string, city: string) {
  console.log(`当前点击项：${index}，城市：${city}`)
}
</script>

<style lang="scss">
.wraper {
  height: calc(100vh - var(--window-top));
  height: calc(100vh - var(--window-top) - constant(safe-area-inset-bottom));
  height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom));
}
</style>

特殊用法

更新列表数据

当前示例页仅提供基础用法演示。如果你的列表数据需要动态更新，可以参考下面这个扩展示例，配合 wd-search 组件使用：

查看更新列表数据示例

vue/html

<template>
  <view>
    <wd-search hide-cancel placeholder="我要去哪里？" v-model="keyword" @search="handleSearch" @clear="handleClear" />
    <view class="wraper">
      <wd-index-bar sticky v-if="showList.length">
        <view v-for="item in showList" :key="item.index">
          <wd-index-anchor :index="item.index" />
          <wd-cell border clickable v-for="city in item.data" :key="city" :title="city" @click="handleClick(item.index, city)"></wd-cell>
        </view>
      </wd-index-bar>
    </view>
  </view>
</template>

typescript

<script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-ui'
import { nextTick, onMounted, ref } from 'vue'

const { show: showToast } = useToast()
const keyword = ref('')
const showList = ref<any>([])

const indexList = [
  {
    index: 'A',
    data: ['阿坝', '阿拉善', '阿里', '安康', '安庆', '鞍山', '安顺', '安阳', '澳门']
  },
  {
    index: 'B',
    data: ['北京', '白银', '保定', '宝鸡', '保山', '包头', '巴中', '北海', '蚌埠', '本溪', '毕节', '滨州', '百色', '亳州']
  },
  {
    index: 'C',
    data: [
      '重庆',
      '成都',
      '长沙',
      '长春',
      '沧州',
      '常德',
      '昌都',
      '长治',
      '常州',
      '巢湖',
      '潮州',
      '承德',
      '郴州',
      '赤峰',
      '池州',
      '崇左',
      '楚雄',
      '滁州',
      '朝阳'
    ]
  },
  {
    index: 'D',
    data: ['大连', '东莞', '大理', '丹东', '大庆', '大同', '大兴安岭', '德宏', '德阳', '德州', '定西', '迪庆', '东营']
  },
  {
    index: 'E',
    data: ['鄂尔多斯', '恩施', '鄂州']
  },
  {
    index: 'F',
    data: ['福州', '防城港', '佛山', '抚顺', '抚州', '阜新', '阜阳']
  },
  {
    index: 'G',
    data: ['广州', '桂林', '贵阳', '甘南', '赣州', '甘孜', '广安', '广元', '贵港', '果洛']
  },
  {
    index: 'H',
    data: [
      '杭州',
      '哈尔滨',
      '合肥',
      '海口',
      '呼和浩特',
      '海北',
      '海东',
      '海南',
      '海西',
      '邯郸',
      '汉中',
      '鹤壁',
      '河池',
      '鹤岗',
      '黑河',
      '衡水',
      '衡阳',
      '河源',
      '贺州',
      '红河',
      '淮安',
      '淮北',
      '怀化',
      '淮南',
      '黄冈',
      '黄南',
      '黄山',
      '黄石',
      '惠州',
      '葫芦岛',
      '呼伦贝尔',
      '湖州',
      '菏泽'
    ]
  }
]

onMounted(() => {
  handleSearch()
})

function handleClick(index: string, city: string) {
  showToast(`当前点击项：${index}，城市：${city}`)
}

function handleSearch() {
  showList.value = []
  nextTick(() => {
    if (keyword.value) {
      showList.value = indexList.filter((item) => {
        return item.data.some((city) => {
          return city.includes(keyword.value)
        })
      })
    } else {
      showList.value = indexList
    }
  })
}

function handleClear() {
  keyword.value = ''
  handleSearch()
}
</script>

css

.wraper {
  height: calc(100vh - var(--window-top) - 54px);
  height: calc(100vh - var(--window-top) - constant(safe-area-inset-bottom) - 54px);
  height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom) - 54px);
}

Attributes

参数	说明	类型	默认值
sticky	索引是否吸顶	boolean	false

Slots

name	说明
default	自定义索引列表内容

IndexAnchor Attributes

参数	说明	类型	默认值
index	索引字符	string | number	-
custom-style	根节点自定义样式	string	-
custom-class	根节点自定义类名	string	-

IndexAnchor Slots

name	说明
default	自定义内容

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称	默认值	描述
--wot-index-bar-sidebar-right	$spacing-super-tight	-
--wot-index-bar-index-font-size	$typography-label-size-main	-
--wot-index-bar-index-width	$typography-label-line--height-size-main	-
--wot-index-bar-index-height	$typography-label-line--height-size-main	-
--wot-index-bar-index-font-weight	$font-weight-medium	-
--wot-index-bar-index-color	$text-auxiliary	-
--wot-index-bar-index-border-radius	$radius-radius-full	-
--wot-index-bar-index-color-active	$text-white	-
--wot-index-bar-index-bg-active	$primary-6	-
--wot-index-bar-current-index-size	$n-56	-
--wot-index-bar-current-index-bg	$primary-6	-
--wot-index-bar-current-index-color	$text-white	-
--wot-index-bar-current-index-font-size	$typography-title-size-extra-large	-
--wot-index-bar-current-index-z-index	10	-
--wot-index-anchor-bg	$filled-bottom	-
--wot-index-anchor-padding	$padding-main	-
--wot-index-anchor-font-size	$typography-body-size-main	-
--wot-index-anchor-color	$text-main	-
--wot-index-anchor-z-index	1	-

源代码

文档

• 组件