react+antd Anchor(锚点组件)通讯录字母索引实现

一、页面概述

本项目实现了一个美观、实用的通讯录页面，采用 React 框架，结合 Ant Design 组件库与 TailwindCSS 原子化样式，支持按字母分组展示联系人，并提供便捷的字母索引导航。页面设计现代，交互流畅，适用于各类需要联系人管理的 Web 应用。

二、功能特点

1. 字母分组展示
   联系人自动按姓名首字母分组，分组标题悬浮吸顶，便于快速定位。
2. 字母索引导航
   右侧集成 Ant Design Anchor 组件，点击字母可平滑滚动至对应分组，提升查找效率。
3. 响应式布局
   页面采用 Flex 布局与 TailwindCSS，适配不同屏幕尺寸，移动端与桌面端均有良好体验。
4. 美观的 UI 设计
   联系人卡片采用圆角、阴影、渐变背景等设计，整体风格简洁现代，支持主题色自定义。
5. 交互细节优化
   支持悬浮高亮、点击反馈、分组吸顶等细节，提升用户操作的愉悦感。

三、技术亮点

• React 组件化开发
  代码结构清晰，易于维护和扩展，支持数据动态加载与状态管理。
• Ant Design Anchor 组件深度定制
  通过自定义样式和参数，完美融合 Antd Anchor 字母索引与自定义通讯录列表。
• TailwindCSS 原子化样式
  快速开发高质量 UI，无需编写繁琐的 CSS，极大提升开发效率。
• 平滑滚动与吸顶效果
  利用原生 scroll-behavior 和 CSS sticky，实现分组标题吸顶与平滑滚动，用户体验极佳。
• 高可扩展性
  支持后续集成搜索、分组管理、联系人详情等功能，适合二次开发。

四、适用场景

• 企业/组织内部通讯录管理系统
• 社交类 App/Web 的联系人模块
• 教育、医疗、政务等行业的人员名录展示
• 需要字母索引导航的任意列表型数据页面
• 需要快速查找、分组展示的用户信息管理后台

五、全部源码

import { useRef } from "react";
import { Anchor } from "antd";
import "antd/dist/reset.css";

// 示例数据
const contacts = [
  { name: "Alice", initial: "A" },
  { name: "Aaron", initial: "A" },
  { name: "Bob", initial: "B" },
  { name: "Bella", initial: "B" },
  { name: "Cindy", initial: "C" },
  { name: "David", initial: "D" },
  { name: "Eve", initial: "E" },
  { name: "Frank", initial: "F" },
  { name: "Grace", initial: "G" },
  { name: "Helen", initial: "H" },
  { name: "Ivy", initial: "I" },
  { name: "Jack", initial: "J" },
  { name: "Kathy", initial: "K" },
  { name: "Leo", initial: "L" },
  { name: "Mona", initial: "M" },
  { name: "Nina", initial: "N" },
  { name: "Oscar", initial: "O" },
  { name: "Paul", initial: "P" },
  { name: "Queen", initial: "Q" },
  { name: "Rose", initial: "R" },
  { name: "Sam", initial: "S" },
  { name: "Tom", initial: "T" },
  { name: "Uma", initial: "U" },
  { name: "Vera", initial: "V" },
  { name: "Will", initial: "W" },
  { name: "Xander", initial: "X" },
  { name: "Yuki", initial: "Y" },
  { name: "Zack", initial: "Z" },
];

// 分组
const grouped = contacts.reduce((acc, cur) => {
  acc[cur.initial] = acc[cur.initial] || [];
  acc[cur.initial].push(cur);
  return acc;
}, {});
const letters = Array.from({ length: 26 }, (_, i) =>
  String.fromCharCode(65 + i)
);

export default function ContactsAntd() {
  const listRef = useRef();

  // 生成Anchor的items
  const anchorItems = letters
    .filter((letter) => grouped[letter])
    .map((letter) => ({
      key: letter,
      href: `#${letter}`,
      title: letter,
    }));

  return (
    <>
      {/* 覆盖Antd Anchor字母索引栏padding-inline的全局样式 */}
      
      

        {/* 通讯录列表 */}
        

          

            通讯录
          
          {letters.map(
            (letter) =>
              grouped[letter] && (
                

                  

                    {letter}
                  
                  

                    {grouped[letter].map((c) => (
                      

                        

                          {c.name[0]}
                        
                        
                          {c.name}
                        
                      
                    ))}
                  
                
              )
          )}
        
        {/* 右侧字母索引栏（Antd Anchor） */}
        

           listRef.current}
            affix={false}
            showInkInFixed={true}
            style={{ background: "transparent" }}
          />
        
      
    
  );
}

注意

Anchor 锚点实现，如果通讯录组件使用在弹框组件内，点击锚点时，滚动条会出现异常，需要使用 getContainer 属性，指定锚点滚动容器，否则会默认滚动到页面顶部。

 react+antd Anchor(锚点组件)通讯录字母索引实现 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿动态资讯