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

这篇具有很好参考价值的文章主要介绍了uni-app做A-Z排序通讯录、索引列表。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

上图是效果图，三个问题

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

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

// #ifdef APP-PLUS
    plus.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('');//ABCDEFGHJKLMNOPQRSTWXYZ
    var 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;
},

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

文章来源地址https://www.toymoban.com/news/detail-813705.html

到了这里，关于uni-app做A-Z排序通讯录、索引列表的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！