【uniapp前端组件】仿微信通讯录列表组件
2024-04-03 20:25:14
仿微信通讯录列表组件
示例图
前言
仿微信通讯录列表组件，可实现通讯列表以及选择多个联系人功能。
组件介绍
本组件有三个自定义组件构成，都已经集成在bugking7-contact-list中，该组件具有两种模式，不带选择框和带选择框，分别对应前言的两种功能。另外两个组件分别为：
1、字母列表组件（bugking7-letter-list）
通讯录列表右侧字母列表组件，同样本组件也具有两种展现形式，
1.1 全字母形式
全字母模式下固定显示为A-Z以及⬆和#。
1.2 数据决定展现字母形式
显示那些字母由数据决定，需注意，当通讯录组件为带选择框模式下，字母列表组件固定为本形式。
2、选择框组件（bugking7-contact-circle）
当通讯录组件为带选择框模式时，本组件生效，具有选择和非选择两种状态。
属性介绍
| 属性名 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
contactList
|
Array
|
空 | 是 |
通讯录列表数据，详见下方数组类型示例。注：1、当为string类型时，showAvatar应填为false。2、当为Obj类型时，但Obj对象没有图片属性时，showAvatar应填为false。
|
formatContactlistByValue
|
String
|
空 | 是 |
1、contactList类型为String数组时，本属性只能为空。2、contactList类型为Obj数组时，本属性为name（见下方数组类型示例）。即：当contactList数组类型为对象时，本属性需要填列表展示的数据对应的字段名。
|
showAllLetter
|
Boolean
|
true
|
否 |
字母列表组件是否显示全字母形式。当showSelectBtn为true时，本属性失效。
|
showSelectBtn
|
Boolean
|
false
|
否 |
切换通讯录组件为带选择框模式。为true时，showAllLetter属性失效。
|
letterPropWidth
|
Number
|
25，单位px
|
否 | 字母列表组件长度。 |
contactItemHeight
|
Number
|
40，单位px
|
否 |
通讯录列表组件item宽度。
|
showAvatar
|
Boolean
|
true
|
否 |
通讯录列表是否显示头像。必要条件：1、contactList为对象类型且对象包含图片属性。2、avatarValue不为空，可参考formatContactlistByValue属性。
|
avatarValue
|
String
|
空 | 否 |
通讯录列表头像对应的属性值。当showAvatar为true时必填，反之为空。
|
headOptions
|
Object
|
否 | 通讯录是否添加头部列表，包含以下属性： | |
showHead
|
Boolean
|
false
|
同headOptions
|
是否显示通讯录头部列表。当showSelectBtn为true时，本属性为false。
|
headList
|
Array
|
空 |
同headOptions
|
头部列表数组。固定格式为[{img:'https://xxxx.png',title:'新朋友'},{img:'https://xxxx.png',title:'仅聊天的朋友'}]。
|
headItemHeight
|
Number
|
50，单位px
|
同headOptions
|
头部列表item高度。
|
headAvatarValue
|
String
|
空 |
同headOptions
|
头部列表数组头像对应属性名。参考formatContactlistByValue属性。
|
headTitleValue
|
String
|
空 |
同headOptions
|
头部列表数组标题对应属性名。参考formatContactlistByValue属性。
|
注：以下属性，只有当showSelectBtn为true时生效。**
|
||||
showCheck
|
Boolean
|
false
|
否 | 选择框选中状态。**** |
borderWidth
|
Number
|
1，单位px
|
否 | 选择框未选中状态下边框宽度。**** |
borderColor
|
String
|
#d2c5c0
|
否 | 选择框未选中状态下边框颜色。**** |
borderStyle
|
String
|
solid
|
否 |
选择框未选中状态下选择框样式。支持solid实线、dashed虚线。****
|
checkBgColor
|
String
|
#007aff
|
否 | 选择框选中状态下背景色。**** |
iconWidth
|
Number
|
15，单位px
|
否 | 选择框长宽大小。**** |
checkIconWidth
|
Number
|
15，单位px
|
否 | 选择框选中状态下对号图标大小。**** |
selectFinishBtnCheckBgColor
|
String
|
#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'}]
}其他
欢迎使用，评论留言。
项目地址
仿微信通讯录列表组件
【uniapp前端组件】仿微信通讯录列表组件相关推荐
- RN仿微信通讯录列表
源码在此 先看一下预览图效果: pic1.jpg 首先通过构造器初始化state constructor(props) {super(props);this.state = {//Global这里是全 ...
- 自己现实的仿微信通讯录列表
自己项目中需要做一个通讯录,单是和微信不一样,微信通讯录头部的几列好像是固定的,但是项目中的头部是群组管理,是动态的,对其联系人还需要做首字母排序,效果倒是很容易做出来,但是这里只能放一个listvi ...
- 小程序组件-仿微信通讯录
效果图 因为是使用的手机录屏,视频格式为MP4,上传到文章时发现只支持图片,还好电脑自动录屏功能,所以简单的录制了一下,完后又提示只能4M,只能再去压缩图片,所以画质略渣,各位客官讲究的看看吧. 特色 ...
- android 字母索引三方,Android ListView字母索引(仿微信通讯录列表)
布局代码 xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_paren ...
- uni-app 写小程序 索引列表，仿微信通讯录
心里认定了一个女孩 就要好好的珍惜对待她,人生不容辜负,你必须要更加努力 .加油 骚年 uni-app 写小程序 索引列表,仿微信通讯录 去uni-app官网 下载插件 indexlist <m ...
- 安卓：ListView组件实现微信通讯录效果（我的王者队友们）
ListView控件是列表视图展示,排列方式是纵向. ListView组件实现微信通讯录效果,包含头像和文字,不能用entries这个属性来添加,要用SimpleAdapter适配器来添加数据 布局: ...
- 【Android 仿微信通讯录 导航分组列表-上】使用ItemDecoration为RecyclerView打造带悬停头部的分组列表
*本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布 转载请标明出处: http://blog.csdn.net/zxt0601/article/details/52355199 本文 ...
- RecyclerView+index索引实现仿微信通讯录
感觉之前写的有点乱,所以有重新整理了一下这个博客: demo下载地址:http://download.csdn.net/detail/qq_34501274/9799175 最近跟朋友聊天,说道博客相 ...
- android 字母搜索栏,android仿微信通讯录搜索示例(匹配拼音,字母,索引位置)
前言: 仿微信通讯录搜索功能,通过汉字或拼音首字母找到匹配的联系人并显示匹配的位置 一:先看效果图 字母索引 搜索匹配 二:功能分析 1:汉字转拼音 通讯录汉字转拼音(首个字符当考虑姓氏多音字), 现 ...
最新文章
- Spring Boot如何实现在线预览？这个开源项目可以学习一下，支持99%常用文件！...
- [转]VirtualBox下RedHat 5.4 使用DVD光盘作为yum源
- MyEclipse解决Launching xx on MyEclipse Tomcat has encountered a problem
- JAVA虚拟机运行数据区
- 2019年第十届蓝桥杯国赛B组试题A-平方序列-枚举
- x·dy＋y²·sinx·dx＝0
- java中while循环练习,java练习 七、循环语句 do……while循环语句
- vue中使用window.open会在url前自动添加本地服务器的地址bug修复
- thinkphp视图中插入php代码
- C++11 regex库
- OpenCV教程(C++)
- 信号与系统MATLAB版pdf,信号与系统基础（MATLAB版）
- 数学作图工具_数学趣览X 曾让古希腊人犯怵的三大几何作图难题
- 字符图形7-星号菱形
- 深度学习自学（二十六）：人脸关键点检测
- MySQL-数据库基础
- 普及ERP不靠低价风暴(转)
- 免费服务器+免费域名 【白嫖手册】
- 神秘的百度工业互联网，到底有多厉害？
- 5.8G无线游戏耳机模组方案需要哪些亮点|天惠微科技