通讯录

<template>
  <div class="home">
  	<div class="home_head">联系人</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;  //声明一个数组去接收我们传输数据
   	 for(let i=0;i<data.length;i++)
   	  {
   	  	//将所有汉字的首字母提取出来增进数据库中
   	  	data[i]["firstWord"]=ConverPinyin(data[i].name).slice(0,1)
   	  }
   	 //将首字母转换为ASCII码值让数据库的数据进行排序
   	 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)
   	 	  //检测数据的开头字母是否重复
   	 	  {	   	 	  
   	 	  	if(isNaN(data[i].firstWord)){
   	 	  		homeRight.push(data[i].firstWord)
   	 	  		//形成一个去重过后的数组
   	 	  	}	   	 	  		
   	 	  	//形成一个右侧列表
   	 	  }
   	 }
   	 homeRight.push("#")//用来存放不是a-z开头的联系人	   	
   	 this.homeRight=homeRight;//右侧列表已渲染完毕

      let arr=[]; //声明一个空数组
      for(let i=0;i<homeRight.length;i++)
      //循环右侧的数据
      {
      	 let temp={ids:homeRight[i],child:[]}
      	 //然后我们声明一个空的对象 ids 存入 所有的 右侧数据
      	 //child为空数组
      	 for(let j=0;j<data.length;j++){
      	 	//判断右侧的字母与数据库内的 firstWord相等 如果相等
      	 	
      	 	  if(homeRight[i]==data[j].firstWord){
      	 	  	temp.child.push(data[j])
      	 	  	//那么我们将所有的数据放入这个child中
      	 	  }else{
      	 	  	//判断数据是否是数组并且让他们进去最后的#号
      	 	  	if(!isNaN(data[j].firstWord)&&temp.ids=="#"){          	 	  		
      	 	  		  //将不是a-z字母的都push 到#号当中去
      	 	  		  temp.child.push(data[j])
      	 	  	}
      	 	  }
      	 }

      	 arr.push(temp)//arr来接受所有的temp数据
      }
      
      如何需要文字转字母的文件请复制其它文章