Tuniao UI Uniapp V3

Appearance

12:13

TnIndexList-索引列表 ​

索引列表用于展示带有索引的列表信息，例如用户列表等

组件位置 ​

typescript
import TnIndexList from '@tuniao/tnui-vue3-uniapp/components/index-list/src/index-list.vue'
import TnIndexList from '@tuniao/tnui-vue3-uniapp/components/index-list/src/index-list.vue'
typescript
import TnIndexList from '@/uni_modules/tuniaoui-vue3/components/index-list/src/index-list.vue'
import TnIndexList from '@/uni_modules/tuniaoui-vue3/components/index-list/src/index-list.vue'

平台差异说明 ​

App(vue)H5微信小程序支付宝小程序...
√√√√适配中

基础使用 ​

通过data传递需要展示的列表数据，data中传递的是一个对象，对象的key为索引的值，可以设置的值为a~z和#，对象的value为需要设置对应索引的数据，包含title当前展现列表的标题，data为当前展示列表的数据，列表data传递的是一个对象数组，如果对象中包含star属性且设置为true则在收藏列表中展示该数据

右边的列表索引只会显示传递的data中包含的索引值

vue
<script lang="ts" setup>
import type { IndexListData } from '@tuniao/tnui-vue3-uniapp'

const listData: IndexListData = {
  a: {
    title: 'A',
    data: [
      {
        id: 0,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/1.png',
        username: '图鸟UI-总监',
        office: '高级设计总监',
        star: true, // 设置为收藏
      },
      {
        id: 1,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/2.png',
        username: '图鸟UI-总监',
        office: '高级设计总监',
      },
      {
        id: 2,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/3.png',
        username: '图鸟UI-总监',
        office: '高级设计总监',
      },
    ],
  },
  c: {
    title: 'C',
    data: [
      {
        id: 3,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/4.png',
        username: '图鸟UI-总监',
        office: '高级设计总监',
      },
      {
        id: 4,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/5.png',
        username: '图鸟UI-总监',
        office: '高级设计总监',
      },
      {
        id: 5,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/6.png',
        username: '图鸟UI-总监',
        office: '高级设计总监',
      },
    ],
  },
  '#': {
    title: '#',
    data: [
      {
        id: 6,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/7.png',
        username: '图鸟UI-打杂',
        office: '高级打杂',
      },
      {
        id: 7,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/8.png',
        username: '图鸟UI-打杂',
        office: '高级打杂',
      },
      {
        id: 8,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/9.png',
        username: '图鸟UI-打杂',
        office: '高级打杂',
      },
    ],
  },
}
</script>

<template>
  <TnIndexList :data="listData">
    <template #default="{ data }">
      <view class="list-data">
        <image class="image" :src="data.avatar" mode="aspectFill" />
        <view class="info">
          <view class="username">{{ data.username }}</view>
          <view class="office tn-gray_text">{{ data.office }}</view>
        </view>
      </view>
    </template>
  </TnIndexList>
</template>

<style lang="scss" scoped>
.list-data {
  display: flex;
  padding: 30rpx;

  .image {
    width: 90rpx;
    height: 90rpx;
    border-radius: 15rpx;
  }
  .info {
    margin-left: 20rpx;
    line-height: 1;
    .username {
      font-size: 34rpx;
    }
    .office {
      margin-top: 18rpx;
      font-size: 26rpx;
    }
  }
}
</style>
<script lang="ts" setup>
import type { IndexListData } from '@tuniao/tnui-vue3-uniapp'

const listData: IndexListData = {
  a: {
    title: 'A',
    data: [
      {
        id: 0,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/1.png',
        username: '图鸟UI-总监',
        office: '高级设计总监',
        star: true, // 设置为收藏
      },
      {
        id: 1,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/2.png',
        username: '图鸟UI-总监',
        office: '高级设计总监',
      },
      {
        id: 2,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/3.png',
        username: '图鸟UI-总监',
        office: '高级设计总监',
      },
    ],
  },
  c: {
    title: 'C',
    data: [
      {
        id: 3,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/4.png',
        username: '图鸟UI-总监',
        office: '高级设计总监',
      },
      {
        id: 4,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/5.png',
        username: '图鸟UI-总监',
        office: '高级设计总监',
      },
      {
        id: 5,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/6.png',
        username: '图鸟UI-总监',
        office: '高级设计总监',
      },
    ],
  },
  '#': {
    title: '#',
    data: [
      {
        id: 6,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/7.png',
        username: '图鸟UI-打杂',
        office: '高级打杂',
      },
      {
        id: 7,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/8.png',
        username: '图鸟UI-打杂',
        office: '高级打杂',
      },
      {
        id: 8,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/9.png',
        username: '图鸟UI-打杂',
        office: '高级打杂',
      },
    ],
  },
}
</script>

<template>
  <TnIndexList :data="listData">
    <template #default="{ data }">
      <view class="list-data">
        <image class="image" :src="data.avatar" mode="aspectFill" />
        <view class="info">
          <view class="username">{{ data.username }}</view>
          <view class="office tn-gray_text">{{ data.office }}</view>
        </view>
      </view>
    </template>
  </TnIndexList>
</template>

<style lang="scss" scoped>
.list-data {
  display: flex;
  padding: 30rpx;

  .image {
    width: 90rpx;
    height: 90rpx;
    border-radius: 15rpx;
  }
  .info {
    margin-left: 20rpx;
    line-height: 1;
    .username {
      font-size: 34rpx;
    }
    .office {
      margin-top: 18rpx;
      font-size: 26rpx;
    }
  }
}
</style>
vue
<script lang="ts" setup>
import type { IndexListData } from '@/uni_modules/tuniaoui-vue3'

const listData: IndexListData = {
  a: {
    title: 'A',
    data: [
      {
        id: 0,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/1.png',
        username: '图鸟UI-总监',
        office: '高级设计总监',
        star: true, // 设置为收藏
      },
      {
        id: 1,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/2.png',
        username: '图鸟UI-总监',
        office: '高级设计总监',
      },
      {
        id: 2,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/3.png',
        username: '图鸟UI-总监',
        office: '高级设计总监',
      },
    ],
  },
  c: {
    title: 'C',
    data: [
      {
        id: 3,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/4.png',
        username: '图鸟UI-总监',
        office: '高级设计总监',
      },
      {
        id: 4,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/5.png',
        username: '图鸟UI-总监',
        office: '高级设计总监',
      },
      {
        id: 5,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/6.png',
        username: '图鸟UI-总监',
        office: '高级设计总监',
      },
    ],
  },
  '#': {
    title: '#',
    data: [
      {
        id: 6,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/7.png',
        username: '图鸟UI-打杂',
        office: '高级打杂',
      },
      {
        id: 7,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/8.png',
        username: '图鸟UI-打杂',
        office: '高级打杂',
      },
      {
        id: 8,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/9.png',
        username: '图鸟UI-打杂',
        office: '高级打杂',
      },
    ],
  },
}
</script>

<template>
  <tn-index-list :data="listData">
    <template #default="{ data }">
      <view class="list-data">
        <image class="image" :src="data.avatar" mode="aspectFill" />
        <view class="info">
          <view class="username">{{ data.username }}</view>
          <view class="office tn-gray_text">{{ data.office }}</view>
        </view>
      </view>
    </template>
  </tn-index-list>
</template>

<style lang="scss" scoped>
.list-data {
  display: flex;
  padding: 30rpx;

  .image {
    width: 90rpx;
    height: 90rpx;
    border-radius: 15rpx;
  }
  .info {
    margin-left: 20rpx;
    line-height: 1;
    .username {
      font-size: 34rpx;
    }
    .office {
      margin-top: 18rpx;
      font-size: 26rpx;
    }
  }
}
</style>
<script lang="ts" setup>
import type { IndexListData } from '@/uni_modules/tuniaoui-vue3'

const listData: IndexListData = {
  a: {
    title: 'A',
    data: [
      {
        id: 0,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/1.png',
        username: '图鸟UI-总监',
        office: '高级设计总监',
        star: true, // 设置为收藏
      },
      {
        id: 1,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/2.png',
        username: '图鸟UI-总监',
        office: '高级设计总监',
      },
      {
        id: 2,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/3.png',
        username: '图鸟UI-总监',
        office: '高级设计总监',
      },
    ],
  },
  c: {
    title: 'C',
    data: [
      {
        id: 3,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/4.png',
        username: '图鸟UI-总监',
        office: '高级设计总监',
      },
      {
        id: 4,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/5.png',
        username: '图鸟UI-总监',
        office: '高级设计总监',
      },
      {
        id: 5,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/6.png',
        username: '图鸟UI-总监',
        office: '高级设计总监',
      },
    ],
  },
  '#': {
    title: '#',
    data: [
      {
        id: 6,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/7.png',
        username: '图鸟UI-打杂',
        office: '高级打杂',
      },
      {
        id: 7,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/8.png',
        username: '图鸟UI-打杂',
        office: '高级打杂',
      },
      {
        id: 8,
        avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/9.png',
        username: '图鸟UI-打杂',
        office: '高级打杂',
      },
    ],
  },
}
</script>

<template>
  <tn-index-list :data="listData">
    <template #default="{ data }">
      <view class="list-data">
        <image class="image" :src="data.avatar" mode="aspectFill" />
        <view class="info">
          <view class="username">{{ data.username }}</view>
          <view class="office tn-gray_text">{{ data.office }}</view>
        </view>
      </view>
    </template>
  </tn-index-list>
</template>

<style lang="scss" scoped>
.list-data {
  display: flex;
  padding: 30rpx;

  .image {
    width: 90rpx;
    height: 90rpx;
    border-radius: 15rpx;
  }
  .info {
    margin-left: 20rpx;
    line-height: 1;
    .username {
      font-size: 34rpx;
    }
    .office {
      margin-top: 18rpx;
      font-size: 26rpx;
    }
  }
}
</style>

设置索引列表的高度 ​

可以通过height属性设置索引列表的高度，如果不设置则默认为当前显示区域的高度，单位为 px

vue
<template>
  <TnIndexList :data="listData" :height="500">
    <template #default="{ data }">
      <view class="list-data">
        <image class="image" :src="data.avatar" mode="aspectFill" />
        <view class="info">
          <view class="username">{{ data.username }}</view>
          <view class="office tn-gray_text">{{ data.office }}</view>
        </view>
      </view>
    </template>
  </TnIndexList>
</template>
<template>
  <TnIndexList :data="listData" :height="500">
    <template #default="{ data }">
      <view class="list-data">
        <image class="image" :src="data.avatar" mode="aspectFill" />
        <view class="info">
          <view class="username">{{ data.username }}</view>
          <view class="office tn-gray_text">{{ data.office }}</view>
        </view>
      </view>
    </template>
  </TnIndexList>
</template>

设置标题吸顶的高度 ​

如果开发者使用了自定义顶部导航栏，可以通过设置sticky-offset-top的值来设置标题吸顶的高度，单位为 px

vue
<template>
  <TnIndexList :data="listData" :sticky-offset-top="45">
    <template #default="{ data }">
      <view class="list-data">
        <image class="image" :src="data.avatar" mode="aspectFill" />
        <view class="info">
          <view class="username">{{ data.username }}</view>
          <view class="office tn-gray_text">{{ data.office }}</view>
        </view>
      </view>
    </template>
  </TnIndexList>
</template>
<template>
  <TnIndexList :data="listData" :sticky-offset-top="45">
    <template #default="{ data }">
      <view class="list-data">
        <image class="image" :src="data.avatar" mode="aspectFill" />
        <view class="info">
          <view class="username">{{ data.username }}</view>
          <view class="office tn-gray_text">{{ data.office }}</view>
        </view>
      </view>
    </template>
  </TnIndexList>
</template>

API ​

Props ​

属性名说明类型默认值可选值
data索引列表数据IndexListData--
height索引列表的高度，单位 px，不传值则以当前窗口的高度为准Number--
sticky-offset-top标题吸顶距离，单位 pxNumber0-
title-bg-color标题背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgbaString--
title-color标题文字颜色，支持图鸟内置的颜色值、hex、rgb、rgbaString--
title-size标题尺寸，内置 sm、lg、xl，同时也可以传递指定的尺寸的值String-sm \ lg \ xl
show-keys-list是否显示右侧索引列表Booleantruefalse

Events ​

事件名说明类型
click索引点击事件(key: string) => void

IndexListData ​

typescript
type IndexListData<T = any> = Partial<
  Record<IndexListKeys, IndexListDataItem<T>>
>

const indexListKeys = [
  'a',
  'b',
  'c',
  'd',
  'e',
  'f',
  'g',
  'h',
  'i',
  'j',
  'k',
  'l',
  'm',
  'n',
  'o',
  'p',
  'q',
  'r',
  's',
  't',
  'u',
  'v',
  'w',
  'x',
  'y',
  'z',
  '#',
] as const
type IndexListKeys = (typeof indexListKeys)[number]

type IndexListDataItemData<T = any> = T & {
  star?: boolean
}

interface IndexListDataItem<T = any> {
  title: string
  data: IndexListDataItemData<T>[]
}
type IndexListData<T = any> = Partial<
  Record<IndexListKeys, IndexListDataItem<T>>
>

const indexListKeys = [
  'a',
  'b',
  'c',
  'd',
  'e',
  'f',
  'g',
  'h',
  'i',
  'j',
  'k',
  'l',
  'm',
  'n',
  'o',
  'p',
  'q',
  'r',
  's',
  't',
  'u',
  'v',
  'w',
  'x',
  'y',
  'z',
  '#',
] as const
type IndexListKeys = (typeof indexListKeys)[number]

type IndexListDataItemData<T = any> = T & {
  star?: boolean
}

interface IndexListDataItem<T = any> {
  title: string
  data: IndexListDataItemData<T>[]
}

Tuniao UI

Copyright © 2019-present Evan You,Made with ❤️ by Tuniao UI