【uniapp前端组件】仿微信通讯录列表组件

已于 2022-08-19 13:57:50 修改
阅读量2.9k 收藏 14
点赞数 2
分类专栏： uniapp前端组件 文章标签： 前端 微信 uni-app
于 2022-08-18 14:23:21 首次发布
本文出自公子柒的博客，转载必须注明出处。
本文链接：https://blog.csdn.net/weixin_43838701/article/details/126405028
版权

仿微信通讯录列表组件

示例图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

前言

仿微信通讯录列表组件，可实现通讯列表以及选择多个联系人功能。

组件介绍

本组件有三个自定义组件构成，都已经集成在bugking7-contact-list中，该组件具有两种模式，不带选择框和带选择框，分别对应前言的两种功能。另外两个组件分别为：

1、字母列表组件（bugking7-letter-list）

通讯录列表右侧字母列表组件，同样本组件也具有两种展现形式，

1.1 全字母形式

全字母模式下固定显示为A-Z以及⬆和#。

1.2 数据决定展现字母形式

显示那些字母由数据决定，需注意，当通讯录组件为带选择框模式下，字母列表组件固定为本形式。

2、选择框组件（bugking7-contact-circle）

当通讯录组件为带选择框模式时，本组件生效，具有选择和非选择两种状态。

属性介绍

属性名类型默认值必填说明
contactListArray空是通讯录列表数据，详见下方数组类型示例。注：1、当为string类型时，showAvatar应填为false。2、当为Obj类型时，但Obj对象没有图片属性时，showAvatar应填为false。
formatContactlistByValueString空是1、contactList类型为String数组时，本属性只能为空。2、contactList类型为Obj数组时，本属性为name（见下方数组类型示例）。即：当contactList数组类型为对象时，本属性需要填列表展示的数据对应的字段名。
showAllLetterBooleantrue否字母列表组件是否显示全字母形式。当showSelectBtn为true时，本属性失效。
showSelectBtnBooleanfalse否切换通讯录组件为带选择框模式。为true时，showAllLetter属性失效。
letterPropWidthNumber25，单位px否字母列表组件长度。
contactItemHeightNumber40，单位px否通讯录列表组件item宽度。
showAvatarBooleantrue否通讯录列表是否显示头像。必要条件：1、contactList为对象类型且对象包含图片属性。2、avatarValue不为空，可参考formatContactlistByValue属性。
avatarValueString空否通讯录列表头像对应的属性值。当showAvatar为true时必填，反之为空。
headOptionsObject否通讯录是否添加头部列表，包含以下属性：
showHeadBooleanfalse同headOptions是否显示通讯录头部列表。当showSelectBtn为true时，本属性为false。
headListArray空同headOptions头部列表数组。固定格式为[{img:'https://xxxx.png',title:'新朋友'},{img:'https://xxxx.png',title:'仅聊天的朋友'}]。
headItemHeightNumber50，单位px同headOptions头部列表item高度。
headAvatarValueString空同headOptions头部列表数组头像对应属性名。参考formatContactlistByValue属性。
headTitleValueString空同headOptions头部列表数组标题对应属性名。参考formatContactlistByValue属性。
注：以下属性，只有当showSelectBtn为true时生效。**
showCheckBooleanfalse否选择框选中状态。****
borderWidthNumber1，单位px否选择框未选中状态下边框宽度。****
borderColorString#d2c5c0否选择框未选中状态下边框颜色。****
borderStyleStringsolid否选择框未选中状态下选择框样式。支持solid实线、dashed虚线。****
checkBgColorString#007aff否选择框选中状态下背景色。****
iconWidthNumber15，单位px否选择框长宽大小。****
checkIconWidthNumber15，单位px否选择框选中状态下对号图标大小。****
selectFinishBtnCheckBgColorString#007aff否通讯录组件为带选择框模式下，完成按钮为可点击模式下，完成按钮的背景色。****

事件介绍

事件名说明
@selectContactFinish选择多个联系人事件回调。返回值event:{selectList:array}，当showSelectBtn为true时生效。
@contactItemClick通讯录列表点击事件。返回值event:{superIndex: 1, index: 0, superLetter: 'B', contactData: '保山机场'}，superIndex为格式化后数据的父级下标 、index为点击的item下标、 superLetter为点击的字母、contactData为点击的item内容，具体形式根据contactList而变。当showSelectBtn为true时，本事件失效。
@headItemClick头部列表点击事件。返回值event:{headItemIndex:index},headItemIndex对应头部列表item下标。

使用示例

<bugking7-contact-list 
		:contactList="listObj" 
		:formatContactlistByValue="test"
		:avatarValue="avatarValue"
		:contactItemHeight="50"
		:showAllLetter="true"
		:showSelectBtn="true"
		:showAvatar="true"
		:headOptions="headOptions"
		@selectContactFinish="handleSelectFinish"
		@contactItemClick="handleContactClick"
		@headItemClick="handleHeadClick"
		></bugking7-contact-list>
		
data() {
	return {
		list:airport.list,
				listObj:airportobj.list,
				test:'name',
				avatarValue:'img',
				headOptions:{
					showHead:true,
					headList:[
							{img:'https://img1.baidu.com/it/u=317200242,1525371697&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',title:'新的朋友'},
						{img:'https://img1.baidu.com/it/u=317200242,1525371697&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',title:'仅聊天的朋友'}
					],
					headItemHeight:50,
					headAvatarValue:'img',
					headTitleValue:'title'
				}
	}
},
methods: {
	handleCircleClick(e){
				
	},
	handleContactClick(e){
		console.log(e)
	},
	handleSelectFinish(e){
		console.log(e)
	},
    handleHeadClick(e){
		console.log(e)
	}
			
}

数组（contactList）类型示例

1、Stirng类型数组

export default {
	'list': [
		'123333',
		'$dsadasdas',
		'三亚凤凰国际机场',
		'汕头外砂机场',
		'阿克苏机场',
		'济宁曲阜机场',
		'喀什机场',
		'克拉玛依机场',
		'库车龟兹机场',
		'库尔勒机场',
		'昆明巫家坝国际机场',
		'UFO机场',
		'V机场',
		'万州五桥机场',
		'潍坊机场',
		'西安咸阳国际机场',
		'西昌青山机场',
		'锡林浩特机场',
		'延安二十里堡机场',
		'盐城机场',
		'湛江机场',
		'昭通机场',
		
	]
}

2、Obj类型数组

export default {
	'list': [
		{
			name:'123333',
			age:'123',
			img:'https://img1.baidu.com/it/u=1573021393,3002820466&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
		},
		{
			name:'上海虹桥国际机场',
			age:'123',
			img:'https://img2.baidu.com/it/u=319390679,1961129989&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400'
		},
		{
			name:'临沂机场',
			age:'123',
			img:'https://img0.baidu.com/it/u=3314467930,2227940019&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=440'
		},
		{
			name:'铜仁凤凰机场',
			age:'123',
			img:'https://img2.baidu.com/it/u=1010282593,3475916619&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=478'
		},
		{
			name:'龙岩冠豸山机场',
			age:'123',
			img:'https://img1.baidu.com/it/u=317200242,1525371697&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400'
		},
		{
			name:'玉树巴塘机场',
			age:'123',
			img:'https://img1.baidu.com/it/u=1573021393,3002820466&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
		},
		{
			name:'西安咸阳国际机场',
			age:'123',
			img:'https://img1.baidu.com/it/u=317200242,1525371697&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400'
		},
		{
			name:'上海虹桥国际机场',
			age:'123',
			img:'https://img1.baidu.com/it/u=1573021393,3002820466&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
		},
		{
			name:'UFO机场',
			age:'123',
			img:'https://img1.baidu.com/it/u=1573021393,3002820466&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
		},
		{
			name:'二连浩特赛乌苏国际机场',
			age:'123',
			img:'https://img1.baidu.com/it/u=1573021393,3002820466&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
		},
		{
			name:'贵阳龙洞堡国际机场',
			age:'123',
			img:'https://img1.baidu.com/it/u=317200242,1525371697&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400'
		},
		{
			name:'景德镇机场',
			age:'123',
			img:'https://img1.baidu.com/it/u=1573021393,3002820466&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
		},
		{
			name:'@#￥@@！',
			age:'123',
			img:'https://img1.baidu.com/it/u=1573021393,3002820466&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
		},
		{
			name:'上海虹桥国际机场',
			age:'123',
			img:'https://img1.baidu.com/it/u=1573021393,3002820466&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
		},
		{
			name:'临沂机场',
			age:'123',
			img:'https://img1.baidu.com/it/u=1573021393,3002820466&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
		},
		{
			name:'铜仁凤凰机场',
			age:'123',
			img:'https://img1.baidu.com/it/u=1573021393,3002820466&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
		},
		{
			name:'龙岩冠豸山机场',
			age:'123',
			img:'https://img1.baidu.com/it/u=1573021393,3002820466&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
		},
		{
			name:'玉树巴塘机场',
			age:'123',
			img:'https://img1.baidu.com/it/u=1573021393,3002820466&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
		},
		{
			name:'西安咸阳国际机场',
			age:'123',
			img:'https://img1.baidu.com/it/u=1573021393,3002820466&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
		},
		{
			name:'上海虹桥国际机场',
			age:'123',
			img:'https://img1.baidu.com/it/u=1573021393,3002820466&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
		},
		{
			name:'UFO机场',
			age:'123',
			img:'https://img1.baidu.com/it/u=1573021393,3002820466&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
		},
		{
			name:'二连浩特赛乌苏国际机场',
			age:'123',
			img:'https://img1.baidu.com/it/u=1573021393,3002820466&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
		},
		{
			name:'贵阳龙洞堡国际机场',
			age:'123',
			img:'https://img1.baidu.com/it/u=1573021393,3002820466&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
		},
		{
			name:'景德镇机场',
			age:'123',
			img:'https://img1.baidu.com/it/u=1573021393,3002820466&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
		}
	]
}

其他

欢迎使用，评论留言。

项目地址

仿微信通讯录列表组件

小二者也
关注
  • 2
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
uni-app 写小程序 索引列表，仿微信通讯录
qq_37732761的博客
03-23 2879
心里认定了一个女孩 就要好好的珍惜对待她，人生不容辜负，你必须要更加努力 。加油 骚年 uni-app 写小程序 索引列表，仿微信通讯录 去uni-app官网 下载插件 indexlist <missthee-indexlist :data="carLists" placeholder='输入关键字进行查询' @select-item='selectHandler'></missthee-indexlist> carLists 就是 请求回来的数据 下载完这个插件 会有一个
android 实现仿微信通讯录
11-20
android 实现仿微信通讯录android 实现仿微信通讯录android 实现仿微信通讯录android 实现仿微信通讯录android 实现仿微信通讯录android 实现仿微信通讯录android 实现仿微信通讯录android 实现仿微信通讯录android ...
uniapp如何制作一个收缩通讯录（布局篇)
精通前端技术，了解后端接口
12-10 704
【代码】uniapp如何制作一个收缩通讯录（布局篇)
微信小程序通讯录功能；uni-app微信小程序通讯录单选；uni-app微信小程序通讯录多选；uni-app微信小程序通讯录好友功能；uni-indexed-list使用；通讯录高度修改；
i_am_a_div的博客
08-23 3507
介绍：项目使用的是uni-app做的微信小程序；uni-app里原来就用一个组件uni-indexed-list，是用来做通讯录的；可以直接看官方案例也就是hello-uniapp-master下的导航栏；但是官方这个是多选，且没有默认选中功能；故本文是在使用官方组件同时，修改原组件的代码来达到单选和默认选中功能； 解决思路： ...
uni-app常用拓展组件推荐
Eren_acd的博客
04-21 2363
小程序在用户规模及商业化方面都取得了极大的成功。截至2021年12月，微信小程序日活超过4.5亿，支付宝、百度、头条小程序的月活也都超过了3亿。对应小程序开发领域，开发框架从单纯的微信小程序开发过渡到多端框架成为标配，进一步提升开发效率成为开发者的强烈需求。
【uniapp】仿微信通讯录列表实现
Komorebi_00的博客
11-10 746
【代码】仿微信通讯录列表实现。
uni-app 实现通讯录列表
weixin_45932157的博客
04-21 3104
<template> <uni-indexed-list :options="list" :show-select="false" @click="bindClick" /> </template> <script> import airport from '@/common/mail_list.js' export default { components: {}, data() { return { list: airport
uniapp小程序项目中实现通讯录功能
Quentin0823的博客
12-07 4350
最近小程序项目需求有通讯录这样的需求 简单效果图是这样的 首先，我们需要调后台接口获取姓名还有其他信息，将获取回来的中文名字转换为拼音，这里做的是转为姓名首字母大写的简写格式（比如：“安其拉” 转为“AQL”）这里只需要名字的第一个字的首字母，使用js的截取功能就能实现，中文转拼音这里我使用的是js-pinyin，将转换好的内容渲染到页面上。第一步 下载js-pinyin包 （安装依赖这里可以参考 这篇文章） 第二步 在main.js中引入js-pinyin 第三步 在methdos函数中调用接口获取名
uniapp6组件间的通讯方式
温温的博客
06-21 592
父传子、子传父，兄弟之间
Android仿微信通讯录列表侧边栏效果
01-04
先看Android仿微信通讯录列表侧边栏效果图 这是比较常见的效果了吧 列表根据首字符的拼音字母来排序，且可以通过侧边栏的字母索引来进行定位。 实现这样一个效果并不难，只要自定义一个索引View，然后引入一个...
仿微信通讯录列表
08-19
【仿微信通讯录列表】是一种常见的用户界面设计，它结合了群组管理和联系人排序功能，使得用户在浏览和操作通讯录时体验更加便捷。在Android开发中，这个设计需要开发者巧妙地处理数据结构和视图更新，以实现与微信...
通讯录字母列表索引
02-26
相信大家对这个列表字母索引已经不陌生了，在很多app中也随处可见，像没团的城市地址选择，微信联系人列表，手机通讯录…等等。既然是个这么nb这么实用的功能我们怎么能不Get到来呢，下面就让我们一起造一个出来吧
高仿微信通讯录列表
11-10
首先，"高仿微信通讯录列表"指的是创建一个与微信应用中通讯录界面相似的用户界面。这个界面通常包括一个可滚动的联系人列表，每个联系人的名字按照拼音或笔画排序，并且在列表的侧边有一条滑动字母导航栏。当用户...
考拉开源仿微信uniapp前端+JAVA后端IM即时通讯
08-17
《考拉开源仿微信uniapp前端+JAVA后端IM即时通讯》 本项目是一个基于开源技术构建的即时通讯系统，其设计灵感来源于微信，旨在提供类似微信的聊天体验。项目的核心在于前端使用了uniapp框架，后端采用了JAVA语言...
关于 uni app 打包 h5 污染wx，造成引入企业微信的通讯录组件 ww-open-data 无法使用的问题
sani_x的博客
12-03 2451
uniapp 打成h5 让wx受到污染，引入企业微信的通讯录组件ww-open-data无法使用的问题以及解决方法。
uniapp字母条
小权权的博客
02-24 437
字母条组件 使用组件 <letter-list @toastTxt="toastTxt" @clickToastTxt="clickToastTxt"></letter-list> ...... <!-- 滑动字母条显示对应字母 --> <view class="toastLetter" v-if="flag">{{toastText}}</view> 组件通信的方法 // 滑动字母条事件 toastTxt (obj) { t
uni-app 5.1~5.3 通讯录列表页开发
善假于物
08-24 1236
通讯录列表页面email.nvue <template> <view> <!-- 导航栏 --> <free-nav-bar title="通讯录"></free-nav-bar> <!-- 通讯录列表 --> <free-list-item v-for="(item,index) in topList" :key="index" :title="item.title" :cover="item.cove.
中国34个省市 按字母排序 uniapp城市列表
weixin_43678533的博客
03-19 3467
<uni-indexed-list :options="list" :showSelect="false" @click="bindClick"></uni-indexed-list> "list": [{ "letter": "A", "data": [ "安徽省","澳门特别行政区" ] }, { "letter": "B", "data": ["北京市"] }, { "letter": "C", "data": ["重庆市"] }.
前端技术学习记录-基础知识（二）JavaScript基本语法
最新发布
adanjeep的博客
07-11 191
/ 声明一个String类型的变量name name = "Alice";// 初始化变量name int age;// 声明一个int类型的变量age age = 25;// 初始化变量age。静态强类型：Java语言，在申明变量时，需要明确定于变量的类型。对明确申明的变量，需要做强制转换，才会发生变化，否则不变。//数字 a = "hahaha";//字符串 </script>动态弱类型语言：变量可以存放在不同类型的值（动态）=== 比较相等（不会进行隐式类型转换）>>> 无符号右移（逻辑右移）
uniapp使用组件在微信小程序不生效
07-13
你好！对于在微信小程序中使用组件，确保以下几点： 1. 首先，要确定你的组件是否支持在微信小程序中使用。有一些组件可能是特定于其他平台的，无法在微信小程序中正常工作。确保你使用的组件是兼容微信小程序的。 2. 确保你的 UniApp 版本是最新的。有时候旧版本可能存在一些问题，更新到最新版本可能会修复这些问题。 3. 检查组件的引入方式。在 UniApp 中，你可以使用 `import` 或 `require` 语句来引入组件。确保你的引入方式是正确的，并且路径指向了正确的组件。 4. 在页面或组件中正确使用组件。在使用组件时，确保你在页面或组件的 template 中正确引用了组件，并且传入了正确的 props 和事件处理函数。 如果你仍然遇到问题，建议查看 UniApp 的官方文档或社区论坛，寻求更多帮助和解决方案。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小二者也

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值