# tui-index-list 索引列表

介绍

索引列表,类似微信通讯录效果。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiIndexList from "@/components/thorui/tui-index-list/tui-index-list.vue"
export default {
	components:{
		tuiIndexList
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
升级中

# 微信小程序引入(可在app.json中全局引入)

{
  "usingComponents": {
    "tui-index-list": "/components/thorui/tui-index-list/tui-index-list"
  }
}

# 代码演示

部分功能演示,具体可参考示例程序以及文档API。

案例展示

通过 list-data 属性传入数据,插槽具体使用介绍请前往 进阶用法

<!--uni-app-->
<tui-index-list :list-data="listData">
	<template v-slot:header>
		<tui-searchbar backgroundColor="#ededed" placeholder="搜索" @input="input" @search="search"
			@clear="clearInput"></tui-searchbar>
		<tui-list-cell padding="16rpx 30rpx">
			<!--此处样式App端偶尔会丢失-->
			<view class="tui-list__item" style="display: flex; align-items: center;" @tap="newFriends">
				<image class="tui-avatar" style="width: 68rpx;height: 68rpx;"
					src="https://thorui.cn/extend/avatar/img_new_friends.png"></image>
				<view style="padding-left: 20rpx;">新的朋友</view>
			</view>
		</tui-list-cell>
	</template>
	<!--uniapp V2.0版本此处已做调整,循环在外部执行,兼容vue3-->
	<template v-slot:item="{ entity,index}">
		<tui-list-cell padding="16rpx 30rpx" v-for="(item,subi) in entity" :key="subi" @click="itemClick(index,subi)">
			<view class="tui-list__item">
				<image class="tui-avatar" :src="item.avatar"></image>
				<view class="tui-name">{{ item.name }}</view>
			</view>
		</tui-list-cell>
	</template>
	<template v-slot:footer>
		<tui-loadmore v-if="getTotal == 0 && init"></tui-loadmore>
		<view class="tui-footer__total" v-if="getTotal > 0 || !init">{{ getTotal }}位联系人</view>
	</template>
</tui-index-list>

<!--微信小程序-->
 <tui-index-list bindclick="itemClick" list-data="{{listData}}" generic:item="index-item">
	<view slot="header">
		<tui-searchbar backgroundColor="#ededed" placeholder="搜索" bindinput="input" bindsearch="search" bindclear="clearInput"></tui-searchbar>
		<tui-list-cell padding="16rpx 30rpx">
			<view class="tui-list__item" bindtap="newFriends">
				<image  class="tui-avatar" src="https://thorui.cn/extend/avatar/img_new_friends.png"></image>
				<view class="tui-name">新的朋友</view>
			</view>
		</tui-list-cell>
	</view>
	<view slot="footer">
		<tui-loadmore wx:if="{{parse.getTotal(listData) == 0 && init}}"></tui-loadmore>
		<view class="tui-footer__total" wx:if="{{parse.getTotal(listData) > 0 || !init}}">{{ parse.getTotal(listData) }}位联系人</view>
	</view>
</tui-index-list>

# Slots

名称 说明
header 列表顶部展示的内容
item 列表内容,微信小程序此处使用的是 抽象节点 (opens new window)
footer 列表底部展示的内容

# Props

参数 类型 说明 默认值
listData Array 数据源 []
top Number index-list顶部所占高度 0
bottom Number index-list底部所占高度 0
unit String top和bottom单位,可传rpx 或 px px
topLine Boolean sticky(initial)条是否显示上边线条 true
bottomLine Boolean sticky(initial)条是否显示下边线条 true
height String sticky(initial)条高度 60rpx
color String sticky(initial)条字体颜色 #666
activeColor String sticky(initial)条吸顶时字体颜色 #5677fc
size String sticky(initial)条字体大小 26rpx
background String sticky(initial)条背景色 #ededed
activeBackground String sticky(initial)条吸顶时背景色 #FFFFFF
padding String sticky(initial)条padding值 0 20rpx
keyColor String 右侧固定索引条字体颜色 #666
activeKeyColor String 右侧固定索引条选中时字体颜色 #FFFFFF
activeKeyBackground String 右侧固定索引条选中时背景颜色 #5677fc
reinit Number 重新初始化(可异步加载时使用,设置大于0的数) 0
listData 属性Object格式以及参数说明

Object格式

{
		"letter": "A",
		"data": [{
				"id": 1,
				"name": "阿拉斯加",
				"mobile": "13588889999",
				"keyword": "阿拉斯加ABA13588889999",
				"avatar": "https://thorui.cn/avatar/1.jpg"
			},
			{
				"id": 2,
				"name": "阿克苏",
				"mobile": "0551-4386721",
				"keyword": "阿克苏AKESU0551-4386721",
				"avatar": "https://thorui.cn/avatar/2.jpg"
			}
		]
}

参数说明

letter 索引KEY,约定属性名,不可更改

data 索引KEY下data数据,约定属性名,不可更改。data 中Object数据自定义即可

# Events

2.0版本后,uniapp版本中click事件已移除,item项循环在页面中执行。

事件名 说明 回调参数
click 索引列表item点击事件(仅小程序版支持) 返回item的Object数据(父级传入)
letterClick 1.6.2 索引点击事件 {
  index:Number,
  letter: String
}

# 预览

请以移动端效果为准,touch事件目前尚未在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码