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

news2024/9/27 4:10:28

上图是效果图,三个问题

  • 访问电话通讯录,拿数据
  • 拿到用户的联系人数组对象,之后根据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;
},

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1379754.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

怎么把身份证压缩到200k以下?一分钟教你如图片压缩

在网络平台办理一些业务的时候&#xff0c;经常会需要上传我们的身份证照片&#xff0c;但是大多数平台为了用户体验&#xff0c;会限制上传的图片大小&#xff0c;比如图片不得超过200kb&#xff0c;当我们提交的身份证图片超出限制&#xff0c;就无法顺利提交&#xff1b;这时…

每日一练:LeeCode-104. 二叉树的最大深度【二叉树】

本文是力扣LeeCode-104. 二叉树的最大深度 学习与理解过程&#xff0c;本文仅做学习之用&#xff0c;对本题感兴趣的小伙伴可以出门左拐LeeCode。 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例…

Asp .Net Web应用程序(.Net Framework4.8)网站发布到IIS

开启IIS 如果已开启跳过这步 打开控制面板-程序 打开IIS 发布Web程序&#xff08;.Net Framework 4.8 web网页&#xff09; 进入IIS管理器新建一个应用池 新建一个网站 网站创建完毕 为文件夹添加访问权限 如果不添加访问权限&#xff0c;运行时将会得到如下错误 设置权限 勾…

可以在微信群里使用midjourney,gpt4,gemini,文心一言4.0,且免费

免费使用gpt4和midjourney 免费使用 参考链接&#xff1a; https://chat.xutongbao.top/

用React给XXL-JOB开发一个新皮肤(三):实现登录页和Layout骨架

目录 一. 简述二. 接口服务调整 2.1. 登录接口2.2. 登出接口2.3. 修改密码接口2.4. 修改配置文件 三. 前端HTTP 请求四. 登录页面 4.1. 搭建登录页面4.2. 对接登录接口 五. Layout 骨架 5.1. 搭建骨架5.2. Header5.3. 修改密码5.4. 退出登录 六. 其他 一. 简述 上一篇文章我…

【栈】【字符】Leetcode 20 有效的括号

【栈】【字符】Leetcode 20 有效的括号 解法1 栈的操作&#xff08;先进后出&#xff09; ---------------&#x1f388;&#x1f388;题目链接&#x1f388;&#x1f388;------------------- 解法1 栈的操作&#xff08;先进后出&#xff09; 新建栈&#xff1a;Stack<C…

Oracle篇—实例中和name相关参数的区别和作用

☘️博主介绍☘️&#xff1a; ✨又是一天没白过&#xff0c;我是奈斯&#xff0c;DBA一名✨ ✌✌️擅长Oracle、MySQL、SQLserver、Linux&#xff0c;也在积极的扩展IT方向的其他知识面✌✌️ ❣️❣️❣️大佬们都喜欢静静的看文章&#xff0c;并且也会默默的点赞收藏加关注❣…

数据挖掘实战-基于机器学习的电商文本分类模型

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

【算法分析与设计】跳跃游戏

题目 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处: 0 < j < nums[i] i j < n 返回到达 nums[n - …

微信小程序快速入门02(含案例)

&#x1f3e1;浩泽学编程&#xff1a;个人主页 &#x1f525; 推荐专栏&#xff1a;《深入浅出SpringBoot》《java项目分享》 《RabbitMQ》《Spring》《SpringMVC》 &#x1f6f8;学无止境&#xff0c;不骄不躁&#xff0c;知行合一 文章目录 前言一、页面导航1.…

第七讲 单片机驱动彩色液晶屏 控制RA8889软件:显示文字:Part3.自建字库

单片机驱动TFT彩色液晶屏系列讲座 目录 第一讲 单片机最小系统STM32F103C6T6通过RA8889驱动彩色液晶屏播放视频 第二讲 单片机最小系统STM32F103C6T6控制RA8889驱动彩色液晶屏硬件框架 第三讲 单片机驱动彩色液晶屏 控制RA8889软件:如何初始化 第四讲 单片机驱动彩色液晶屏 控…

用通俗易懂的方式讲解:一文讲透主流大语言模型的技术原理细节

大家好&#xff0c;今天的文章分享三个方面的内容&#xff1a; 1、比较 LLaMA、ChatGLM、Falcon 等大语言模型的细节&#xff1a;tokenizer、位置编码、Layer Normalization、激活函数等。 2、大语言模型的分布式训练技术&#xff1a;数据并行、张量模型并行、流水线并行、3D …

P1042 [NOIP2003 普及组] 乒乓球————C++

目录 [NOIP2003 普及组] 乒乓球题目背景题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示 解题思路Code运行结果 [NOIP2003 普及组] 乒乓球 题目背景 国际乒联现在主席沙拉拉自从上任以来就立志于推行一系列改革&#xff0c;以推动乒乓球运动在全球的普及。其中 …

计算机毕业设计-----SSH企业人力资源管理系统

项目介绍 企业人力资源管理系统&#xff0c;分为超级管理员与普通管理员两种角色,超级管理员可以对普通管理员进行添加、删除等操作&#xff1b; 超级管理员主要功能有&#xff1a; 部门管理、员工管理、招聘管理、培训管理、奖惩管理、薪资管理、用户信息修改、系统管理&…

jmap使用

jmap 是 Java 虚拟机 (JVM) 中的一个命令行工具&#xff0c;用于生成堆转储。这个工具对于诊断内存问题、分析内存占用情况等非常有用。 jmap 官方文档 bash: jmap: command not found 命令找不到 # jmap -dump <pid>jmap -dump 137886 安装一下java-devel yum -y in…

[②C++ Boost]: Boost库编译,arm交叉编译方法

前言 Boost是十分实用的C库&#xff0c;如果想在arm环境下使用&#xff0c;就需要自己下载源码编译&#xff0c;本篇博客就记录下Boost库的编译方法。 下载Boost源码 Boost源码的下载路径可以使用&#xff1a;https://sourceforge.net/projects/boost/files/boost/ 编译 …

计算机毕业设计----SSH实现简单在线听音乐收藏管理系统

项目介绍 项目分为管理员与普通用户两种角色&#xff0c; 管理员角色包含以下功能&#xff1a; 管理员登录,用户管理,歌曲管理等功能。 用户角色包含以下功能&#xff1a; 按分类查看,添加歌单,用户登录等功能。 环境需要 1.运行环境&#xff1a;最好是java jdk 1.8&…

基于SSM中小型医院管理系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

C/S架构,集成三维影像后处理功能,自主版权的一套医院PACS系统源码

一、PACS简介 PACS&#xff08;PictureArchivingandCommunicationsSystem&#xff09;即图像存储与传输系统&#xff0c;是应用于医院的数字医疗设备如CT、MR&#xff08;磁共振&#xff09;、US&#xff08;超声成像&#xff09;、X光机、DSA&#xff08;数字减影&#xff09…

Qt 调试系统输出报警声以及添加资源

文章目录 前言一、方法1 使用 Qsound1.添加都文件 直接报错2.解决这个错误 添加 QT multimedia3. 加入代码又遇到新的错误小结 二、第二种方法1.引入库2.添加资源2.1依次点击Qt--->Qt Resource File--->Choose2.2给资源文件起个名字&#xff0c;如&#xff1a;res&#…