更新记录

1.0.0（2025-07-17） 下载此版本

iOS Contacts 联系人列表组件

一个高度还原 iOS 风格的联系人列表组件，专为 uni-app 开发。

✨ 特性

平台兼容性

uni-app(4.06)

uni-app x(4.06)

iOS Contacts 联系人列表组件

一个高度还原 iOS 风格的联系人列表组件，专为 uni-app 开发。

✨ 特性

• 📱 iOS 风格: 完美还原 iOS 原生联系人应用的视觉效果和交互体验
• 🔍 智能搜索: 支持按姓名、电话、邮箱搜索联系人
• 📋 分组显示: 按字母自动分组，支持右侧字母索引快速定位
• 💬 详情对话框: 点击联系人显示详细信息对话框
• 📞 快捷操作: 支持拨打电话、发送短信、发送邮件等操作
• 🎨 流畅动画: 丝滑的过渡动画和交互反馈
• 📱 响应式: 完美适配各种屏幕尺寸和设备

📁 组件结构

uni_modules/ios-contacts/
├── components/ios-contacts/
│   └── ios-contacts.vue          # 主组件（完整功能）
├── package.json                  # 组件配置
└── readme.md                    # 说明文档

🚀 快速开始

基础用法

<template>
  <view>
    <ios-contacts />
  </view>
</template>

<script>
import iosContacts from '@/uni_modules/ios-contacts/components/ios-contacts/ios-contacts.vue'

export default {
  components: {
    iosContacts
  }
}
</script>

🎯 功能特性

1. 联系人列表

• 按字母分组显示
• 头像显示（支持图片或首字母）
• 显示姓名和电话号码
• 右侧字母索引快速定位

2. 搜索功能

• 实时搜索联系人
• 支持按姓名、电话、邮箱搜索
• 搜索结果高亮显示

3. 详情对话框

• 点击联系人显示详细信息
• 大头像显示
• 快捷操作按钮（拨打电话、发送短信、发送邮件）
• 详细联系信息展示

4. 快捷操作

• 拨打电话: 直接调用系统拨号功能
• 发送短信: 跳转到短信应用
• 发送邮件: 跳转到邮件应用

📋 数据格式

联系人数据结构

{
  id: 1,                           // 唯一标识
  name: '张三',                    // 姓名（必需）
  phone: '138-0013-8000',          // 电话号码（必需）
  email: 'zhangsan@example.com',   // 邮箱（可选）
  company: '科技有限公司',          // 公司（可选）
  avatar: ''                       // 头像URL（可选，为空时显示首字母）
}

🎨 界面展示

主界面

• iOS 风格导航栏
• 搜索栏
• 分组联系人列表
• 右侧字母索引

详情对话框

• 大头像显示
• 联系人姓名和电话
• 快捷操作按钮
• 详细信息列表
• 完成按钮

🔧 自定义配置

样式变量

// 主色调
$primary-color: #007AFF;
$background-color: #f2f2f7;
$card-background: #ffffff;
$text-color: #000000;
$secondary-text: #8e8e93;
$border-color: #c6c6c8;

// 尺寸
$nav-height: 44px;
$search-height: 36px;
$contact-height: 60px;
$avatar-size: 40px;

功能扩展

组件支持以下扩展：

1. 自定义联系人数据源
2. 自定义头像显示逻辑
3. 自定义快捷操作
4. 自定义搜索逻辑
5. 自定义分组规则

📱 平台兼容性

• ✅ H5
• ✅ 小程序（微信、支付宝、百度等）
• ✅ App（iOS、Android）
• ✅ 快应用

🎯 使用场景

• 企业通讯录应用
• 客户管理系统
• 社交应用联系人
• 团队成员列表
• 客服系统联系人

📝 注意事项

1. 权限要求: 拨打电话功能需要相应的系统权限
2. 数据格式: 确保联系人数据格式正确
3. 性能优化: 大量联系人时建议使用虚拟列表
4. 平台差异: 不同平台的系统调用可能有差异

🔄 更新日志

v1.0.0

• 🎉 初始版本发布
• ✨ 支持 iOS 风格联系人列表
• 🔍 支持智能搜索功能
• 💬 支持详情对话框
• 📞 支持快捷操作功能
• 📱 完美适配移动端

📦 分发说明

1. 复制整个 uni_modules/ios-contacts 文件夹到目标项目
2. 在页面中直接引用组件即可使用
3. 无需额外配置，开箱即用

🤝 贡献

欢迎提交 Issue 和 Pull Request 来完善这个组件！