<template>
? <div class="home">
? <div class="home_head">聯(lián)系人</div>
? ? ? <div class="homeMain" v-for="(v,i) in homeList">
? ? ? ? <p class="homeMainPs" :id="v.ids">{{v.ids}}</p>
? ? ? ? <div class="homeMain_left" v-for="(v,i) in v.child">
? ? ? ? ? <p> <span class="homeMain_spanLeft">{{v.name}}</span>
? ? ? ? ? <span class="homeMain_spanRight">{{v.tel}}
? ? ? ? ? <a :href="'tel:'+v.tel" class="iconfont icon-fenlei-gedouyouxi"></a>
? ? ? ? ? </span> </p>
? ? ? ? </div>? ? ?
? ? ? </div>
? ? ? <div class="homeRight" >
? ? ? <p v-for="(v,i) in homeRight" @click="toScroll(v)">{{v}}</p>
? ? ? </div>
? <foot />
? </div>
</template>
<style scoped>
.home_head{
width: 100%;
height: 1rem;
background: white;
display: flex;
align-items: center;
justify-content: center;
}
.homeMain{
width: 100%;
height: auto;
}
.homeMainPs{
width: 100%;
background: gray;
box-sizing: border-box;
padding: 0.24rem;
}
.homeMain_left{
width: 100%;
height: auto;
box-sizing: border-box;
padding: 0.2rem;
}
.homeRight{
width: 8%;
height: 80%;
position: fixed;
top: 1rem;
right: 0.1rem;
text-align: center;
display: flex;
flex-direction: column;
}
.homeRight p{
flex: 1;
}
.homeMain_spanLeft{
float: left;
}
.homeMain_spanRight{
float: right;
box-sizing: border-box;
padding-right: 0.6rem;
}
</style>? ?
? created{
? //我們通過created進行操作
? this.axios.get(api).then(res=>{
? let data=res.dataList;? //聲明一個數(shù)組去接收我們傳輸數(shù)據(jù)
? for(let i=0;i<data.length;i++)
? ? {
? ? //將所有漢字的首字母提取出來增進數(shù)據(jù)庫中
? ? data[i]["firstWord"]=ConverPinyin(data[i].name).slice(0,1)
? ? }
? //將首字母轉換為ASCII碼值讓數(shù)據(jù)庫的數(shù)據(jù)進行排序
? data=data.sort(function(a,b){
? return a.firstWord.charCodeAt()-b.firstWord.charCodeAt()
? });
? let homeRight=[];
? // 篩選出右側的列表 對其排序
? for(let i=0;i<data.length;i++)
? {
? ? if(homeRight.includes(data[i].firstWord)==false)
? ? //檢測數(shù)據(jù)的開頭字母是否重復
? ? { ? ?
? ? if(isNaN(data[i].firstWord)){
? ? homeRight.push(data[i].firstWord)
? ? //形成一個去重過后的數(shù)組
? ? } ? ?
? ? //形成一個右側列表
? ? }
? }
? homeRight.push("#")//用來存放不是a-z開頭的聯(lián)系人 ?
? this.homeRight=homeRight;//右側列表已渲染完畢
? ? ? let arr=[]; //聲明一個空數(shù)組
? ? ? for(let i=0;i<homeRight.length;i++)
? ? ? //循環(huán)右側的數(shù)據(jù)
? ? ? {
? ? ? let temp={ids:homeRight[i],child:[]}
? ? ? //然后我們聲明一個空的對象 ids 存入 所有的 右側數(shù)據(jù)
? ? ? //child為空數(shù)組
? ? ? for(let j=0;j<data.length;j++){
? ? ? //判斷右側的字母與數(shù)據(jù)庫內的 firstWord相等 如果相等
? ? ? ? if(homeRight[i]==data[j].firstWord){
? ? ? ? temp.child.push(data[j])
? ? ? ? //那么我們將所有的數(shù)據(jù)放入這個child中
? ? ? ? }else{
? ? ? ? //判斷數(shù)據(jù)是否是數(shù)組并且讓他們進去最后的#號
? ? ? ? if(!isNaN(data[j].firstWord)&&temp.ids=="#"){? ? ? ? ? ?
? ? ? ? ? //將不是a-z字母的都push 到#號當中去
? ? ? ? ? temp.child.push(data[j])
? ? ? ? }
? ? ? ? }
? ? ? }
? ? ? arr.push(temp)//arr來接受所有的temp數(shù)據(jù)
? ? ? }
? ? ? 如何需要文字轉字母的文件請復制其它文章
