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 (
{pointLists}
{userLists}