首先先引入 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;
}
效果图:
请大佬帮助,我只是小白一只,只会使用有些地方还不是明白