首先先引入 flexible.js 手機端人適配，引入jquery插件，引入 jquery.charfirst.pinyin,js獲取第一個漢字首字母

?

HTML部分內容

sort.css部分

?

sort。css的部分代碼

#letter{

????width:?100px;

????height:?100px;

????border-radius:?5px;

????font-size:?75px;

????color:?#555;

????text-align:?center;

????line-height:?100px;

????background:?rgba(145,145,145,0.6);

????position:?fixed;

????left:?50%;

????top:?50%;

????margin:-50px?0px?0px?-50px;

????z-index:?99;

????display:?none;

????font-family:?PingFangSC-Medium;

}

#letter?img{

????width:?50px;

????height:?50px;

????float:?left;

????margin:25px?0px?0px?25px;

}

.sort_box{

????width:?100%;

????overflow:?hidden;

}

.sort_list{

????padding:?.1rem?.4rem?0;

????position:?relative;

????height:?1.2rem;

????line-height:?1.2rem;

????background:?#fff;

????color:?#222;

????font-size:?16px;

????color:?#000;

????box-sizing:?content-box;

}

?

.sort_list?.num_logo{

????width:?50px;

????height:?50px;

????border-radius:?10px;

????overflow:?hidden;

????position:?absolute;

????top:?5px;

????left:?20px;

}

.sort_list?.num_name{

????color:?#000;

????/*border-bottom:?.5px?solid?#EBEBEB;*/

}

?

.sort_letter{

????height:?.6rem;

????line-height:?.6rem;

????padding-left:?.4rem;

????color:#000;

????font-size:?.28rem;

????/*border-bottom:1px?solid?#ddd;*/

}

.initials{

????position:?fixed;

????display:?inline-flex;

????flex-direction:?column;

????justify-content:?center;

????align-items:?center;

????top:?1rem;

????right:?.3rem;

????height:?100%;

????width:?16px;

????padding-right:?0;

????text-align:?center;

????font-size:?0.22rem;

????line-height:?0.32rem;

????font-family:?PingFangSC-Medium;

????z-index:?99;

????background:?transparent;

????color:?#222;

}

.initials?li+li{

????padding-top:0.04rem;

}

?

效果圖：

請大佬幫助，我只是小白一只，只會使用有些地方還不是明白

總結

以上是生活随笔為你收集整理的手机端通讯录制作，字母索引查找的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。