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

上图是效果图,三个问题

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

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

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【深度学习目标检测】十六、基于深度学习的麦穗头系统-含GUI和源码(python,yolov8)

全球麦穗检测是植物表型分析领域的一个挑战&#xff0c;主要目标是检测图像中的小麦麦穗。这种检测在农业领域具有重要意义&#xff0c;可以帮助农民评估作物的健康状况和成熟度。然而&#xff0c;由于小麦麦穗在视觉上具有挑战性&#xff0c;准确检测它们是一项艰巨的任务。 全…

DP读书:《openEuler操作系统》(八)TCP、UDP与跨机器通讯

10min速通TCP与UDP 2024 DP读书计算机网络简介TCP/IP协议栈A. 物理层1.信号及信道传递2.信号调制与调解3.信道的复用 B. 数据链路层1.封装成帧2.透明传输3.差错控制 C. 网络层1.IP2.ARP3.路由选择协议 D. 传输层1.端口号2.3.UDP 2024 DP读书 第八章 跨机器通讯 在第六章之中&a…

翻译: Streamlit从入门到精通 基础控件 一

这个关于Streamlit的教程旨在帮助数据科学家或机器学习工程师&#xff0c;他们不是网络开发者&#xff0c;也不想花费数周时间学习使用这些框架来构建网络应用程序。 1. 什么是Streamlit&#xff1f; Streamlit是一个免费且开源的框架&#xff0c;用于快速构建和共享美观的机器…

(南京观海微电子)——色温介绍

色温是表示光线中包含颜色成分的一个计量单位。从理论上说&#xff0c;黑体温度指绝对黑体从绝对零度&#xff08;&#xff0d;273℃&#xff09;开始加温后所呈现的颜色。黑体在受热后&#xff0c;逐渐由黑变红&#xff0c;转黄&#xff0c;发白&#xff0c;最后发出蓝色光。当…

【MCAL】MCU模块详解

目录 前言 正文 1. MCU模块介绍 2. MCU依赖的模块 3. MCU模块提供服务 3.1 时钟的初始化 3.2 MCU模式的配置 3.3 MCU软件复位功能 3.4 RAM的初始化 4.MCU重要数据类型 4.1 Mcu_ResetType 4.2 Mcu_ModeType 5. MCU重要API 5.1 Mcu_Init 5.2 Mcu_InitClock 5.3 M…

qayrup-switch开发文档

因为只是一个小组件,所以直接拿csdn当开发文档了 书接上文uniapp怎么开发插件并发布 : https://blog.csdn.net/weixin_44368963/article/details/135576511 因为我业没有开发过uniapp的组件,所以我看到下面这个文件还是有点懵的 也不清楚怎么引入, 然后去翻了翻官方文档,官方…

Java设计模式-备忘录模式

备忘录模式 一、概述二、结构三、案例实现&#xff08;一&#xff09;“白箱”备忘录模式&#xff08;二&#xff09;“黑箱”备忘录模式 四、优缺点五、使用场景 一、概述 备忘录模式提供了一种状态恢复的实现机制&#xff0c;使得用户可以方便地回到一个特定的历史步骤&…

系列七、Spring Security中基于Jdbc的用户认证 授权

一、Spring Security中基于Jdbc的用户认证 & 授权 1.1、概述 前面的系列文章介绍了基于内存定义用户的方式&#xff0c;其实Spring Security中还提供了基于Jdbc的用户认证 & 授权&#xff0c;再说基于Jdbc的用户认证 & 授权之前&#xff0c;不得不说一下Spring Se…

[Vue]从数据库中动态加载阿里巴巴矢量图标的两种方式

记录一次在Vue中动态使用阿里巴巴矢量图标库 这是本人第一次使用阿里巴巴的矢量图标库&#xff0c;简单的导入和使用的话网上的教程很多&#xff0c;这里不多赘述&#xff0c;本人的需求是从数据库中加载出来并且显示到页面上&#xff0c;接下来简述一下如何实现。 以下代码均是…

【非监督学习 02】高斯混合模型

高斯混合模型&#xff08;Guassian Mixed Model, GMM&#xff09;也是一种常见的聚类算法&#xff0c;与K均值算法类似&#xff0c;同样使用了EM算法进行迭代计算。高斯混合模型假设每个簇的数据都是符合高斯分布的&#xff0c;当前数据呈现的分布就是各个簇的高斯分布叠加在一…

QT通过QPdfWriter类实现pdf文件生成与输出

一.QPdfWriter类介绍 本文代码工程下载地址&#xff1a; https://download.csdn.net/download/xieliru/88736664?spm1001.2014.3001.5503 QPdfWrite是一个用于创建PDF文件的类&#xff0c;它是Qt库的一部分。它提供了一些方法和功能&#xff0c;使您能够创建和写入PDF文件。…

极简Oracle 11g Release 2 (11.2.0.1.0)

注意&#xff1a;此法无法安装oracle11g(11.2.0.4)&#xff0c;会报如下错&#xff1a; [FATAL] [INS-10105] The given response file /assets/db_install.rsp is not valid. 一、下载解压ORACLE安装包。 从 oracle 官网 下载所需要的安装包&#xff0c;这里我们以 oracle 11…

113.QT中的信号槽

目录 一、信号和槽概述 信号和槽的基本概念&#xff1a; 信号和槽的关系&#xff1a; 二、标准信号槽使用 三、自定义信号槽的使用 自定义信号&#xff1a; 自定义槽&#xff1a; 四、Lambda表达式 1.Lambda 表达式不带参数和返回值&#xff1a; 2.Lambda 表达式带参…

GitHub Copilot的使用方法和快捷按键

GitHub Copilot是GitHub与OpenAI合作开发的一款人工智能编码助手。它基于GPT&#xff08;Generative Pre-trained Transformer&#xff09;模型&#xff0c;可以为你提供代码补全、建议和生成的功能 使用方法&#xff1a; 安装插件&#xff1a; 首先&#xff0c;确保你的开发环…

如何解决NAND系统性能问题?-- NAND接口分类

三、NAND接口 NAND闪存接口是连接主机控制器与NAND存储芯片的通信桥梁&#xff0c;负责命令、地址和数据的传输。典型的NAND闪存接口包括一组I/O线&#xff08;通常为8条或更多&#xff09;用于数据传输&#xff0c;以及若干控制信号线。 基本接口信号&#xff1a; Chip Enable…

一文了解JavaScript的数据类型

在JavaScript中有六种不同的数据类型&#xff0c;六种数据类型又分为5种简单数据类型&#xff08;基本数据类型&#xff09;和1中复杂数据类型&#xff08;引用数据类型&#xff09;&#xff0c;基本数据类型分为&#xff1a;字符串类型&#xff08;string&#xff09;、数值类…

python对自动驾驶进行模拟

使用了 Pygame 库来创建一个简单的游戏环境,模拟了一辆自动驾驶汽车在道路上行驶。汽车的位置和速度通过键盘控制&#xff0c;可以左右移动和加速减速。道路的宽度和颜色可以根据需要进行调整。 import pygame import random # 游戏窗口大小 WINDOW_WIDTH 800 WINDOW_HEIG…

华为路由器OSPF动态链路路由协议配置

R1配置 interface GigabitEthernet0/0/0ip address 10.1.12.1 255.255.255.252 interface LoopBack0ip address 1.1.1.1 255.255.255.255 ospf 1 router-id 1.1.1.1 area 0.0.0.0 network 1.1.1.1 0.0.0.0 network 10.1.12.0 0.0.0.3 R2配置 interface GigabitEthernet0/0/0i…

互联网资讯精选:科技爱好者周刊 | 开源日报 No.145

ruanyf/weekly Stars: 37.4k License: NOASSERTION 记录每周值得分享的科技内容&#xff0c;提供大量就业信息。欢迎投稿、推荐或自荐文章/软件/资源&#xff0c;并可通过多种方式进行搜索。 提供丰富的科技内容每周更新可以提交工作/实习岗位支持投稿和推荐功能 GyulyVGC/…

132基于matlab的采集信号模极大值以及李氏指数计算

基于matlab的采集信号模极大值以及李氏指数计算&#xff0c; 1)计算信号的小波变换。 2)求出模极大曲线。 3)计算其中两个奇异点的Lipschitz指数&#xff0c;程序已调通&#xff0c;可直接运行。 132matlab模极大曲线Lipschitz (xiaohongshu.com)