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示例小程序码