react如何實現(xiàn)通訊錄

這篇“react如何實現(xiàn)通訊錄”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“react如何實現(xiàn)通訊錄”文章吧。

創(chuàng)新互聯(lián)公司專注于寶塔企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),商城網(wǎng)站定制開發(fā)。寶塔網(wǎng)站建設(shè)公司,為寶塔等地區(qū)提供建站服務(wù)。全流程按需制作，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

react實現(xiàn)通訊錄的方法：1、創(chuàng)建一批通訊錄數(shù)據(jù)；2、準備左右兩個dom容器，分別用于承載用戶列表和首字母列表；3、生成用戶列表和首字母列表；4、將首字母頁面的id作為字母列表的值；5、把對應(yīng)首字母頁面的id傳到方法里，然后通過h6的scrollIntoView方法跳轉(zhuǎn)到對應(yīng)的錨點即可。

react實現(xiàn)通訊錄效果

業(yè)務(wù)描述：通過react實現(xià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先準備左右兩個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++){
            //得到每個首字母對應(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 點擊首字母滾動到對應(yīng)用戶

注意我們在第二步生成畫面的時候，重要的一步：將首字母頁面的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>

這樣通過點擊首字母時就可以把對應(yīng)首字母頁面的id傳到方法里，然后通過h6的scrollIntoView方法跳轉(zhuǎn)到對應(yīng)的錨點，

   scrollToAnchor  (e)  {
            // 找到錨點
            var anchorElement = document.getElementById(e.target.innerHTML);
            // 如果對應(yīng)id的錨點存在，就跳轉(zhuǎn)到錨點
           anchorElement.scrollIntoView();
    }

以上就是關(guān)于“react如何實現(xiàn)通訊錄”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁標題：react如何實現(xiàn)通訊錄
本文來源：http://bm7419.com/article20/ppppco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、網(wǎng)站排名、電子商務(wù)、企業(yè)網(wǎng)站制作、定制開發(fā)、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)