ThorUI文档

# 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 属性传入数据，插槽具体使用介绍请前往 进阶用法。

    <template>
 <view class="container">
 	<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>
 		<!--此处2.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>
 </view>
</template>

<script>
 // index.list.js 文件请查看 【ThorUI示例】程序
 import list from '@/utils/index.list.js'
 export default {
 	data() {
 		return {
 			listData: [],
 			init: true
 		};
 	},
 	computed: {
 		getTotal() {
 			let total = 0;
 			for (let item of this.listData) {
 				total += item.data.length;
 			}
 			return total;
 		}
 	},
 	onLoad() {
 		// 模拟异步获取数据场景
 		setTimeout(() => {
 			this.listData = [...list];
 			this.init = false;
 		}, 50);
 	},
 	methods: {
 		search(e) {
 			console.log(e);
 			let value = e.value;
 			this.searchResult(value);
 		},
 		clearInput() {
 			this.searchResult('');
 		},
 		input(e) {
 			console.log(e);
 			let value = e.value;
 			this.searchResult(value);
 		},
 		searchResult(value) {
 			let result = [];
 			for (let item of list) {
 				let data = item.data.filter(item => item.name.indexOf(value) > -1 || item.keyword.toLocaleLowerCase()
 					.indexOf(value.toLocaleLowerCase()) > -1);
 				if (data.length > 0) {
 					result.push({
 						letter: item.letter,
 						data: data
 					});
 				}
 			}
 			this.listData = result;
 		},
 		itemClick(index,subi) {
 			let e=this.listData[index].data[subi]
 			this.tui.toast(`id=${e.id},name=${e.name}`);
 		},
 		newFriends() {
 			this.tui.toast('Hi小友~');
 		}
 	}
 };
</script>

<style>
 .tui-footer__total {
 	width: 100%;
 	height: 90rpx;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	color: #999;
 	font-size: 30rpx;
 }

 .tui-list__item {
 	width: 100%;
 	display: flex;
 	align-items: center;
 }

 .tui-avatar {
 	width: 68rpx;
 	height: 68rpx;
 	border-radius: 8rpx;
 	flex-shrink: 0;
 	background-color: #ccc;
 }

 .tui-name {
 	width: 90%;
 	font-size: 32rpx;
 	padding-left: 20rpx;
 	padding-right: 40rpx;
 	box-sizing: border-box;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
</style>

    <!-- 微信小程序需使用抽象节点，不了解可以查看【进阶用法】中介绍 -->
<view class="container">
 <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>
</view>

 <wxs module="parse">
    module.exports = {
 		getTotal:function(listData){
 			var total = 0;
 			for (var i=0;i<listData.length;i++) {
 				total += listData[i].data.length;
 			}
 			return total;
 		}
 	}
 </wxs>

    // data 数据 及 方法
//js文件请查看示例并自行引入进项目
const list = require('../../../utils/index.list.js');
import tui from '../../../common/httpRequest'
Page({
data: {
  listData: [],
  init: true
},
onLoad: function (options) {
  // 模拟异步获取数据场景
  setTimeout(() => {
    this.setData({
      listData:[...list],
      init:false
    })
  }, 50);
},
search(e) {
  console.log(e);
  let value = e.detail.value;
  this.searchResult(value);
},
clearInput() {
  this.searchResult('');
},
input(e) {
  console.log(e);
  let value = e.detail.value;
  this.searchResult(value);
},
searchResult(value) {
  let result = [];
  for (let item of list) {
    let data = item.data.filter(item => item.name.indexOf(value) > -1 || item.keyword.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) > -1);
    if (data.length > 0) {
      result.push({
        letter: item.letter,
        data: data
      });
    }
  }
  this.setData({
    listData:result
  })
},
itemClick(e) {
  console.log(e);
  tui.toast(`id=${e.detail.id},name=${e.detail.name}`);
},
newFriends() {
  tui.toast('Hi小友~');
},
onShareAppMessage: function () {

}
})

    .tui-footer__total {
	width: 100%;
	height: 90rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	font-size: 30rpx;
}

.tui-list__item {
	width: 100%;
	display: flex;
	align-items: center;
}

.tui-avatar {
	width: 68rpx;
	height: 68rpx;
	border-radius: 8rpx;
	flex-shrink: 0;
	background-color: #ccc;
}

.tui-name {
	width: 90%;
	font-size: 32rpx;
	padding-left: 20rpx;
	padding-right: 40rpx;
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

    // Make sure to add code blocks to your code group

    # 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

    v2.0.0版本后，uniapp版本中click事件已移除，item项循环在页面中执行。

    注：uni-app端绑定事件使用@前缀，如@letterClick；微信小程序原生使用bind前缀，如bindletterClick

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

    # 预览

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

    # 特别说明

    该组件为 会员组件，非开源内容，需开通会员才可获取使用。

    # 线上程序扫码预览

    ThorUI组件库 H5二维码 ThorUI示例
    ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码
    Last Updated: 6/20/2023, 11:10:44 AM

    ← tui-slide-view 滑动菜单wxs →