uni-app做A-Z排序通讯录、索引列表

上图是效果图，三个问题

• 访问电话通讯录，拿数据
• 拿到用户的联系人数组对象，之后根据A-Z排序
• 根据字母索引快速搜索

首先说数据怎么拿 - 社区有指导
https://ask.dcloud.net.cn/question/64117 uniapp 调取通讯录

// #ifdef APP-PLUSplus.contacts.getAddressBook( plus.contacts.ADDRESSBOOK_PHONE, function( addressbook ) {// 查找联系人  addressbook.find(["displayName","phoneNumbers"],function(contacts){  console.log('获取联系人成功')  console.log(JSON.stringify(contacts)) ; //拿到的数据}, function () {  uni.showToast({  title: '获取联系人失败',  duration: 2000  })  },{multiple:true}); }, function ( e ) {alert( "Get address book failed: " + e.message );})
// #endif 

这样就实现了第一步，接下来分析拿到的数据，做处理。

{ "id": 6,"rawId": null,"target": 0,"displayName": "Ann","name": null,"nickname": null,"phoneNumbers": [{"id": 0,"pref": false,"type": "home","value": "895694582"}],"emails": null,"addresses": null,"ims": null,"organizations": null,"birthday": null,"note": null,"photos": null,"categories": null,"urls": null }

从这部分数据看，有用到的是

{displayName:"Ann", "phoneNumbers":[ ... ]}

我们将换成另一种数据结果

 pySort:function(arrList){var $this = this;if(!String.prototype.localeCompare)return null;var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ#".split('');//ABCDEFGHJKLMNOPQRSTWXYZvar zh = "阿八嚓哒妸发旮哈*讥咔垃痳拏噢妑七呥涩它**穵夕丫帀".split('');var result = [];var curr;for(let i=0;i<letters.length;i++){curr = {letter: letters[i], data:[]}; //字母对象，data数据arrList.forEach((n)=>{let initial = n.displayName.charAt(0);//截取第一个字符if(initial==letters[i]||initial==letters[i].toLowerCase()){//首字符是英文的curr.data.push(n);}else if(zh[i]!=='*'&&$this.isChinese(initial)){//判断是否是无汉字,是否是中文let chinaName = pinyin.getFullChars(initial).charAt(0); //直接使用pinyin中方法if(chinaName==letters[i]||chinaName==letters[i].toLowerCase()){//首字符是英文的curr.data.push(n);}}if(letters[i]=='#'&&!$this.isChar(initial)&&!$this.isChinese(initial)){curr.data.push(n);}})result.push(curr)}this.contactList = result; //contactList 是data中定义的 []
},
isChinese:function(temp){var re=/[^\u4E00-\u9FA5]/;if (re.test(temp)){return false;}return true ;
},
isChar:function(char){var reg = /[A-Za-z]/;if (!reg.test(char)){return false ;}return true ;
},

截取姓名的首字符，英文可以直接比对；数字字符也可以直接比对；中文需要将转成拼音再取首字母

汉字转拼音js下载路径：(如果无效，自行处理)
链接：https://pan.baidu.com/s/1NZ4noIgHv2HSzZW6yBRTxA 密码：2kv1

注意的是，下载的这份js不能直接在vue项目中使用,需要在js文件中加

export{pinyin
}
//页面引入
import {pinyin} from '../../common/Convert_Pinyin.js';

这样排序做完。接下来就是索引部分。
其实可以直接使用插件市场的插件，地址附上(https://ext.dcloud.net.cn/plugin?id=375#detail)
但是可以更简单

<scroll-view class="scroll-list" :scroll-into-view="scrollViewId" scroll-y="true" scroll-with-animation  :style="{height:winHeight + 'px'}"><view v-for="(item,index) in contactList" :key="index" :id="item.letter == '#' ? 'indexed-list-YZ' :'indexed-list-' + item.letter"><view class="letter-title" v-if="item.data&&item.data.length" id="item.letter">{{item.letter}}</view><view> .......</view></view>
</scroll-view>
<view class="right-menu"><view v-for="(i,index) in Letters" :key="index" @click="jumper(i,index)" :class="jumperIndex == i?'letter-item active':'letter-item'">{{i}}</view>
</view>

这里的scroll-view是关键，scroll-view

scroll-into-view 与 子元素的id结合使用。

data() {return {jumperIndex:'A',contactList:[],scrollViewId:'',winHeight: 0,itemHeight: 0,Letters:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','#'],}
},
methods:{jumper(event,i){this.jumperIndex = event;let len = this.contactList[i].data.length;if(event == '#'){this.scrollViewId = 'indexed-list-YZ';return}if(len>0){console.log(111);this.scrollViewId = 'indexed-list-' + event;}},
},
onLoad(){       let winHeight = uni.getSystemInfoSync().windowHeight;this.itemHeight = winHeight / 26;this.winHeight = winHeight;
},

主要代码，主要功能完结。