返回顶部
首页 > 资讯 > 精选 >react如何实现通讯录
  • 186
分享到

react如何实现通讯录

2023-07-04 21:07:16 186人浏览 独家记忆
摘要

这篇“React如何实现通讯录”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“react如何实现通讯录”文章吧。react实现

这篇“React如何实现通讯录”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“react如何实现通讯录”文章吧。

react实现通讯录的方法:1、创建一批通讯录数据;2、准备左右两个dom容器,分别用于承载用户列表和首字母列表;3、生成用户列表和首字母列表;4、将首字母页面的id作为字母列表的值;5、把对应首字母页面的id传到方法里,然后通过h6的scrollIntoView方法跳转到对应的锚点即可。

react实现通讯录效果

业务描述:通过react实现一个类似通讯录的页面,并可以通过点击侧边首字母跳转到对应的用户

步骤

1,先造一批假数据

 const users = [                [                {id: 0,  name:"a",imgUrl:white},                {id: 1,  name:'ahat',imgUrl:sysImg4},                {id: 2,  name:'aocial',imgUrl:sysImg4},                {id: 3,  name:'aircle',imgUrl:sysImg4},              ],                [                    {id: 4,  name:"b",imgUrl:white},                    {id: 5,  name:'bhat',imgUrl:sysImg4},                    {id: 6,  name:'bocial',imgUrl:sysImg4},                    {id: 7,  name:'bircle',imgUrl:sysImg4},                ]            ,            [                {id: 8,  name:"c",imgUrl:white},                {id: 9,  name:'chat',imgUrl:sysImg4},                {id: 10,  name:'cocial',imgUrl:sysImg4},                {id: 11,  name:'circle',imgUrl:sysImg4},            ]            ,            [                {id: 12,  name:"d",imgUrl:white},                {id: 13,  name:'dhat',imgUrl:sysImg4},                {id: 14,  name:'docial',imgUrl:sysImg4},                {id: 15,  name:'dircle',imgUrl:sysImg4},            ]            ,            [                {id: 16,  name:"e",imgUrl:white},                {id: 17,  name:'ehat',imgUrl:sysImg4},                {id: 18,  name:'eocial',imgUrl:sysImg4},                {id: 19,  name:'eircle',imgUrl:sysImg4},            ]        ];

2生成用户列表页面

1先准备左右两个dom容器,分别用于承载用户列表和首字母列表

return (        <div className={this.props.chatShow                         }>            <div className={jsPage.chatRight}>              <div className={jsPage.pointListStyle} id="points">                  {pointLists}              </div>              </div>            <div className={jsPage.chatLeft+" "+universal.columnStartCenter}>                {userLists}            </div>        </div>        )

CSS

.chatRight{    height: 100%;width: 3%;    position:fixed;right: 0;}.chatLeft{    height: 100%;width: 95%;}

2通过数据分别生成用户列表和首字母列表放入上一步生成的容器中

     //用户列表        var userLists=new Array();        //侧栏首字母列表        var pointLists=new Array();        //遍历        for(var i=0;i<users.length;i++){            //得到每个首字母对应的用户            var user=users[i];            //map遍历生成用户信息            const userList=user.map(                (number)=>                    <div className={universal.rowCenter+" "+jsPage.chatSpan}  key={number.id} id={number.name}>                        <img src={number.imgUrl} className={jsPage.imgStyle2}                        ></img>                        <div className={jsPage.chatUserInfo+" "+universal.rowStart}>                            <div className={jsPage.chatUserInfoSpan+" "+                            universal.rowCenter+" "+                            jsPage.fontStyle1}>{number.name}</div>                            <div className={jsPage.chatUserInfoSpan}></div>                        </div>                    </div>                    )            //将用户信息放入用户列表            userLists.push(userList);            //生成首字母信息            const point=<div                            onClick={msg=>this.scrollToAnchor(msg)}                            className={jsPage.pointStyle}                             key={user[0].name}                             >{user[0].name}                             </div>            //将首字母信息放入首字母列表            pointLists.push(point);        }

3 点击首字母滚动到对应用户

注意我们在第二步生成画面的时候,重要的一步:将首字母页面的id作为字母列表的值

<div className={universal.rowCenter+" "+jsPage.chatSpan}  key={number.id} id={number.name}>
<div                            onClick={msg=>this.scrollToAnchor(msg)}                            className={jsPage.pointStyle}                             key={user[0].name}                             >{user[0].name}                             </div>

这样通过点击首字母时就可以把对应首字母页面的id传到方法里,然后通过h6的scrollIntoView方法跳转到对应的锚点,

   scrollToAnchor  (e)  {            // 找到锚点            var anchorElement = document.getElementById(e.target.innerhtml);            // 如果对应id的锚点存在,就跳转到锚点           anchorElement.scrollIntoView();    }

以上就是关于“react如何实现通讯录”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网精选频道。

--结束END--

本文标题: react如何实现通讯录

本文链接: https://www.lsjlt.com/news/347568.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • react如何实现通讯录
    这篇“react如何实现通讯录”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“react如何实现通讯录”文章吧。react实现...
    99+
    2023-07-04
  • react怎么实现通讯录
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react怎么实现通讯录?react实现通讯录效果业务描述:通过react实现一个类似通讯录的页面,并可以通过点击侧边首字母跳转到对应的用户大致效果步骤1...
    99+
    2023-05-14
    React
  • C++如何实现通讯录系统
    本篇内容介绍了“C++如何实现通讯录系统”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!制作一个具有添加联系人、删除联系人、修改联系人等功能的...
    99+
    2023-07-02
  • C++如何实现通讯录功能
    这篇文章主要介绍“C++如何实现通讯录功能”,在日常操作中,相信很多人在C++如何实现通讯录功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”C++如何实现通讯录功能”的疑惑有所帮助!接下来,请跟着小编一起来...
    99+
    2023-07-02
  • C++如何实现通讯录小功能
    这篇文章主要介绍“C++如何实现通讯录小功能”,在日常操作中,相信很多人在C++如何实现通讯录小功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”C++如何实现通讯录小功能”的疑惑有所帮助!接下来,请跟着小编...
    99+
    2023-07-02
  • C++如何实现简易通讯录功能
    这篇文章主要讲解了“C++如何实现简易通讯录功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“C++如何实现简易通讯录功能”吧!实现功能提示:这里可以添加本文要记录的大概内容:通过c++语法...
    99+
    2023-07-02
  • python如何实现通讯录管理系统
    一. 项目要求我们可以使用函数来实现通讯录管理系统,该系统需要保存姓名、联系方式、微信号、电子邮件等联系人信息。至少要包含姓名和联系方式两种。该管理系统具备添加、删除、修改、查询、显示和保存信息的功能。二.项目步骤1.使用自定义函数实现每个...
    99+
    2023-05-22
    Python
  • 如何用php实现多对一通讯录
    本文小编为大家详细介绍“如何用php实现多对一通讯录”,内容详细,步骤清晰,细节处理妥当,希望这篇“如何用php实现多对一通讯录”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一. 通讯录的基本功能添加联系人:包括...
    99+
    2023-07-05
  • React组件通信如何实现
    这篇文章主要介绍“React组件通信如何实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“React组件通信如何实现”文章能帮助大家解决问题。1. 父子组件通信方式父子组件之间的通信很常见,其中父组...
    99+
    2023-07-05
  • C语言如何实现通讯录小项目
    这篇文章主要介绍了C语言如何实现通讯录小项目,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。本文实例为大家分享了C语言实现通讯录小项目的具体代码,供大家参考,具体内容如下编写程...
    99+
    2023-06-15
  • android如何实现仿微信通讯录搜索
    这篇文章将为大家详细讲解有关android如何实现仿微信通讯录搜索,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一:先看效果图字母索引搜索匹配二:功能分析1:汉字转拼音通讯录汉字转拼音(首个字符当考虑姓氏...
    99+
    2023-05-30
    android
  • python实现通讯录系统
    本文实例为大家分享了python实现通讯录系统的具体代码,供大家参考,具体内容如下 一、首先,给大家看一下这个系统的主菜单效果 如下: 二、步骤分析 1、首先创建一个main.py...
    99+
    2024-04-02
  • C++实现通讯录功能
    本文实例为大家分享了C++实现通讯录的具体代码,供大家参考,具体内容如下 简介:通讯录由一个拥有者以及通讯信息组成。 基本功能:增删改查 拥有者和通讯信息的基础结构相同,由struc...
    99+
    2024-04-02
  • Java如何实现通讯录管理系统项目
    这篇文章主要介绍了Java如何实现通讯录管理系统项目,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、前言我们学了这么久的知识了,光学知识不会用是一件很悲伤的事情,所以我们应...
    99+
    2023-06-25
  • C语言如何实现通讯录系统程序
    本文小编为大家详细介绍“C语言如何实现通讯录系统程序”,内容详细,步骤清晰,细节处理妥当,希望这篇“C语言如何实现通讯录系统程序”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。前言利用链表增、删、改、查功能以及文件...
    99+
    2023-07-02
  • C++如何实现简易通讯录管理系统
    这篇文章主要介绍“C++如何实现简易通讯录管理系统”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“C++如何实现简易通讯录管理系统”文章能帮助大家解决问题。前言建议收藏,亲手写一遍代码,感受指针神奇的...
    99+
    2023-07-02
  • C++如何实现通讯录管理系统项目
    这篇文章主要介绍“C++如何实现通讯录管理系统项目”,在日常操作中,相信很多人在C++如何实现通讯录管理系统项目问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”C++如何实现通讯录管理系统项目”的疑惑有所帮助!...
    99+
    2023-07-02
  • C++如何实现通讯录管理系统设计
    这篇“C++如何实现通讯录管理系统设计”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“C++如何实现通讯录管理系统设计”文章吧...
    99+
    2023-07-02
  • react如何实现登录和注册
    这篇文章主要介绍了react如何实现登录和注册的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇react如何实现登录和注册文章都会有所收获,下面我们一起来看看吧。react实现登录和注册的方法:1、搭建样式组件;...
    99+
    2023-07-04
  • 用C语言实现通讯录
    相信大家都见识过通讯录,通讯录里面一般有的内容为姓名,联系方式,年龄等信息。通讯录的主要功能有:增加、删除、查找、排序、修改、展示等操作。 那么具体应该用C语言怎么实现这个呢?接下来...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作