这篇“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> )
.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
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0