您好,登錄后才能下訂單哦!
這篇“react如何實(shí)現(xiàn)通訊錄”文章的知識點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“react如何實(shí)現(xiàn)通訊錄”文章吧。
react實(shí)現(xiàn)通訊錄的方法:1、創(chuàng)建一批通訊錄數(shù)據(jù);2、準(zhǔn)備左右兩個(gè)dom容器,分別用于承載用戶列表和首字母列表;3、生成用戶列表和首字母列表;4、將首字母頁面的id作為字母列表的值;5、把對應(yīng)首字母頁面的id傳到方法里,然后通過h6的scrollIntoView方法跳轉(zhuǎn)到對應(yīng)的錨點(diǎn)即可。
react實(shí)現(xiàn)通訊錄效果
業(yè)務(wù)描述:通過react實(shí)現(xiàn)一個(gè)類似通訊錄的頁面,并可以通過點(diǎn)擊側(cè)邊首字母跳轉(zhuǎn)到對應(yīng)的用戶
步驟
1,先造一批假數(shù)據(jù)
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先準(zhǔn)備左右兩個(gè)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通過數(shù)據(jù)分別生成用戶列表和首字母列表放入上一步生成的容器中
//用戶列表
var userLists=new Array();
//側(cè)欄首字母列表
var pointLists=new Array();
//遍歷
for(var i=0;i<users.length;i++){
//得到每個(gè)首字母對應(yīng)的用戶
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 點(diǎn)擊首字母滾動到對應(yīng)用戶
注意我們在第二步生成畫面的時(shí)候,重要的一步:將首字母頁面的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>
這樣通過點(diǎn)擊首字母時(shí)就可以把對應(yīng)首字母頁面的id傳到方法里,然后通過h6的scrollIntoView方法跳轉(zhuǎn)到對應(yīng)的錨點(diǎn),
scrollToAnchor (e) {
// 找到錨點(diǎn)
var anchorElement = document.getElementById(e.target.innerHTML);
// 如果對應(yīng)id的錨點(diǎn)存在,就跳轉(zhuǎn)到錨點(diǎn)
anchorElement.scrollIntoView();
}
以上就是關(guān)于“react如何實(shí)現(xiàn)通訊錄”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對大家有幫助,若想了解更多相關(guān)的知識內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。