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

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

 

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Git】本地仓库文件的创建、修改和删除

目录 一、基本信息设置 1、设置用户名2、设置用户名邮箱 二、Git仓库操作介绍 1、创建一个新的文件夹2、在文件内初始化git仓库&#xff08;创建git仓库&#xff09;3、向仓库中添加文件 1.创建一个文件2.将文件添加到暂存区3.将暂存区添加到仓库 4、修改仓库文件 1.修改文件2.…

基于JAVA+SpringBoot的咖啡商城

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 随着互联网的普及和发…

Windows下Redis5+可视化软件下载、安装和配置教程-2024年1月8日

Windows下Redis5下载、安装和配置教程-2024年1月8日 一、下载二、安装三、配置环境四、配置可视化客户端 一、下载 redis是现在是没有对win系统版进行维护的&#xff0c;这个是大神完成的&#xff0c;目前是到5版本&#xff0c;选择Redis-x64-5.0.14.1.zip点击下载 下载地址&…

使用Navicat导入csv数据至mysql

问题 使用Navicat导入csv数据至mysql 详细问题 笔者有已进行数据处理的csv&#xff0c;需要将数据信息导入mysql中 解决方案 步骤1、建立数据表&#xff0c;字段信息&#xff08;最好&#xff09;与csv字段信息保持一致&#xff0c;方便后续导入。 具体的&#xff0c;双击…

Surface mesh结构学习

CGAL 5.6 - Surface Mesh: User Manual Surface_mesh 类是半边数据结构的实现&#xff0c;可用来表示多面体表面。它是半边数据结构&#xff08;Halfedge Data Structures&#xff09;和三维多面体表面&#xff08;3D Polyhedral Surface&#xff09;这两个 CGAL 软件包的替代品…

2023一带一路暨金砖国家技能发展与技术创新大赛“网络安全”赛项省选拔赛样题卷①

2023金砖国家职业技能竞赛"网络安全" 赛项省赛选拔赛样题 2023金砖国家职业技能竞赛 省赛选拔赛样题第一阶段&#xff1a;职业素养与理论技能项目1. 职业素养项目2. 网络安全项目3. 安全运营 第二阶段&#xff1a;安全运营项目1. 操作系统安全配置与加固任务一Linux …

OpenGL排坑指南—贴图纹理绑定和使用

一、前言 在OpenGL学习 的纹理这一章中讲述了纹理贴图的使用方式&#xff0c;主要步骤是先创建一个纹理的对象&#xff0c;和创建顶点VAO类似&#xff0c;然后就开始绑定这个纹理&#xff0c;最后在循环中使用&#xff0c;有时候可能还要用到激活纹理单元的函数。然而&#xff…

聚对苯二甲酸乙二醇酯PET的特性有哪些?UV胶水能够粘接聚对苯二甲酸乙二醇酯PET吗?又有哪些优势呢?

聚对苯二甲酸乙二醇酯&#xff08;Polyethylene Terephthalate&#xff0c;PET&#xff09;是一种常见的塑料材料&#xff0c;具有许多特性&#xff0c;包括&#xff1a; 1.化学式&#xff1a; PET的化学式为 (C10H8O4)n&#xff0c;其中n表示重复单元的数量。 2.透明度&#…

4.4 媒资管理模块 - 分布式任务处理介绍、视频处理技术方案

媒资管理模块 - 视频处理 文章目录 媒资管理模块 - 视频处理一、视频转码1.1 视频转码介绍1.2 FFmpeg 基本使用1.2.1 下载安装配置1.2.2 转码测试 1.3 工具类1.3.1 VideoUtil1.3.2 Mp4VideoUtil1.3.3 测试工具类 二、分布式任务处理2.1 分布式任务调度2.2 XXL-JOB 配置执行器 中…

C++(10)——模板

目录 1.什么是泛式编程以及模板的引入&#xff1a; 2. 模板&#xff1a; 2.1 函数模板&#xff1a; 2.2 类模板&#xff1a; 1.什么是泛式编程以及模板的引入&#xff1a; 在之前排序的部分中&#xff0c;为了完成某个特定功能&#xff0c;经常会用到交换函数&#xff0c;即…

Jenkins安装和配置

拉取Jenkins镜像 docker pull jenkins/jenkins 编写jenkins_docker.yml version: "3.1" services:jenkins:image: jenkins/jenkinscontainer_name: jenkinsports:- 8080:8080- 50000:50000volumes:- ./data/:/var/jenkins_home/首次启动会因为数据卷data目录没有权限…

强化学习在生成式预训练语言模型中的研究现状简单调研

1. 绪论 本文旨在深入探讨强化学习在生成式预训练语言模型中的应用&#xff0c;特别是在对齐优化、提示词优化和经验记忆增强提示词等方面的具体实践。通过对现有研究的综述&#xff0c;我们将揭示强化学习在提高生成式语言模型性能和人类对话交互的关键作用。虽然这些应用展示…

Django框架完成读者浏览书籍,图书详情页,借阅管理

前情回顾&#xff1a; 使用Django框架实现简单的图书借阅系统——完成图书信息管理 文章目录 1.完成展示图书信息功能1.1django 静态资源管理问题1.2编写图书展示模板HTML 2.完成图书详情页功能2.1从后端获取图书详情信息2.2详情页面展示图书数据 3.完成借阅管理功能3.1管理员…

云卷云舒:AI for DB、DB for AI

云卷云舒&#xff1a;算力网络云原生&#xff08;下&#xff09;&#xff1a;云数据库发展的新篇章-CSDN博客https://blog.csdn.net/bishenghua/article/details/135050556 随着数据库和AI技术的分支同向演进&#xff0c;AI 和数据库间的关联越发紧密了。 大模型的演进发展&a…

MySQL面试题 | 04.精选MySQL面试题

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

py的函数讲解

前言:本章节我们来讲函数&#xff0c;主播略微感觉到有点小难&#xff0c;友友们需要认真看 目录 一.初始函数 1.1关于函数 1.2举例 1.3小结 二.函数的基础语法 2.1关于函数的语法 2.2举例 2.3小结 三.函数的参数 3.1关于函数的参数 3.2举例 3.3小结 四.函数的返回…

Java8常用新特性

目录 简介 1.默认方法 2..Lambda表达式 3.Stream API 4.方法引用 5.Optional类 简介 Java 8是Java编程语言的一个重要版本&#xff0c;引入了许多令人兴奋和强大的新特性。这些特性使得Java程序更加现代化、灵活和高效。让我们一起来探索一些Java 8的常用新特性吧&#…

1.1 计算机网络在信息时代的作用

1.1 计算机网络在信息时代的作用 网络&#xff08;Network&#xff09;由若干结点&#xff08;Node&#xff09;和连接这些结点的链路&#xff08;Link&#xff09;所组成。网络中的结点可以是计算机、集线器、交换机或者路由器等。 图1-1 多个网络还可以通过路由器互连起来&a…

SpringMVC文件上传(CommonsMultipartResolver)

以上传一个图片为例 添加依赖 <!--文件上传--> <dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.1</version> </dependency> 配置文件上传解析器 <…

windows下全免费手动搭建php8+mysql8开发环境及可视化工具安装

最近PHP项目少了&#xff0c;一直在研究UE5和Golang&#xff0c;但是考虑到政府、国企未来几年国产化的要求&#xff0c;可能又要重拾PHP。于是近日把用了N年的框架重新更新至适合PHP8.2以上的版本&#xff0c;同时也乘着新装机&#xff0c;再次搭建php和mysql开发环境。本文留…