上圖是效果圖，三個(gè)問題

• 訪問電話通訊錄，拿數(shù)據(jù)
• 拿到用戶的聯(lián)系人數(shù)組對象，之后根據(jù)A-Z排序
• 根據(jù)字母索引快速搜索

首先說數(shù)據(jù)怎么拿 - 社區(qū)有指導(dǎo)
https://ask.dcloud.net.cn/question/64117 uniapp 調(diào)取通訊錄

// #ifdef APP-PLUS
    plus.contacts.getAddressBook( plus.contacts.ADDRESSBOOK_PHONE, function( addressbook ) {
       // 查找聯(lián)系人  
        addressbook.find(["displayName","phoneNumbers"],function(contacts){  
          console.log('獲取聯(lián)系人成功')  
           console.log(JSON.stringify(contacts)) ; //拿到的數(shù)據(jù)
          }, function () {  
               uni.showToast({  
            title: '獲取聯(lián)系人失敗',  
            duration: 2000  
        })  
           },{multiple:true}); 
    }, function ( e ) {
        alert( "Get address book failed: " + e.message );
    })
// #endif 

這樣就實(shí)現(xiàn)了第一步，接下來分析拿到的數(shù)據(jù)，做處理。

{ 
       "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 }

從這部分?jǐn)?shù)據(jù)看，有用到的是

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

我們將換成另一種數(shù)據(jù)結(jié)果

 pySort:function(arrList){
    var $this = this;
    if(!String.prototype.localeCompare)
        return null;
    var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ#".split('');//ABCDEFGHJKLMNOPQRSTWXYZ
    var zh = "阿八嚓噠妸發(fā)旮哈*譏咔垃痳拏噢妑七呥澀它**穵夕丫帀".split('');
    var result = [];
    var curr;

    for(let i=0;i<letters.length;i++){
        curr = {letter: letters[i], data:[]}; //字母對象，data數(shù)據(jù)
        arrList.forEach((n)=>{
            let initial = n.displayName.charAt(0);//截取第一個(gè)字符
            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 ;
},

截取姓名的首字符，英文可以直接比對；數(shù)字字符也可以直接比對；中文需要將轉(zhuǎn)成拼音再取首字母

漢字轉(zhuǎn)拼音js下載路徑：(如果無效，自行處理)
鏈接：https://pan.baidu.com/s/1NZ4noIgHv2HSzZW6yBRTxA 密碼：2kv1

注意的是，下載的這份js不能直接在vue項(xiàng)目中使用,需要在js文件中加

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

這樣排序做完。接下來就是索引部分。
其實(shí)可以直接使用插件市場的插件，地址附上(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是關(guān)鍵，scroll-view

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;
},

主要代碼，主要功能完結(jié)。