【uniapp】仿微信通讯录列表实现
效果图

代码实现
<view class="main-container"><!-- 成员列表 --><scroll-viewclass="member-list":style="computedHeight":scroll-y="true":enable-back-to-top="true":scroll-with-animation="true":scroll-into-view="toView":scroll-top="scrollTop"@scroll="onScroll"><view class="list-wrap"><view class="category">发起人</view><view class="list-item"><image class="list-item-img" :src="initiatorInfo.headUrl" /><view class="list-item-name">{{ initiatorInfo.nickName }}</view></view></view><view class="list-wrap last-wrap" v-for="(v, i) in memberList" :key="i" :id="v.sign == '#' ? 'intoView_' : 'intoView' + v.sign"><view class="category">{{ v.sign }} ({{ v.list.length }}人)</view><view class="list-item" v-for="item in v.list" :key="item.numberId"><image class="list-item-img" :src="item.headUrl" /><view class="list-item-name">{{ item.nickName }}</view><view class="list-item-btn" @click="handleRemove(item)" v-if="item.userType != 'System'">将TA移出</view></view></view></scroll-view><!-- 右侧字母栏 --><scroll-view class="letter-list"><view :class="['letter-item', activeLetter == '↑' ? 'active' : '']" @click.stop="toTop" @touchend.stop="handleTouchEnd">↑</view><!-- <view :class="['letter-item', activeLetter == '☆' ? 'active-item' : '']" @click="toStar">☆</view> --><view :class="['letter-item', activeLetter == item ? 'active' : '']" v-for="(item, index) in allLetterList" :key="index" @click.stop="toLetter(item)" @touchend.stop="handleTouchEnd">{{ item }}</view></scroll-view>
</view>
需要下载js-pinyin包
npm install js-pinyin --save
引入js-pinyin包
import pinyin from 'js-pinyin'
data() {return {statusBarHeight: 0,initiatorInfo: {}, // 发起人groupNo: '',allLetterList: ['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', '#'],memberList: [],scrollTop: 0,toView: '',activeLetter: ''}
},
computed: {computedHeight() {return { height: `calc(100vh - ${this.statusBarHeight}px - 54px )` }}
},
methods: {// 获取群组成员getList() {getGroupUserList({groupNo: this.groupNo}).then(res => {if (res.code == 'SUCCESS') {let userList = res.data.userList || []this.initiatorInfo = res.data.userList[0] || {}let arr = []this.allLetterList.forEach((item, index) => {arr.push({sign: item,list: []})})this.allLetterList.forEach((item, index) => {userList.forEach(item2 => {let firstLetter = pinyin.getCamelChars(item2.nickName)?.slice(0, 1)if (firstLetter == item) {arr[index].list.push(item2)}if (this.allLetterList.indexOf(firstLetter) == -1 && item == '#') {arr[arr.length - 1].list.push(item2)}})})this.memberList = arr && arr.length ? arr.filter(item => item.list.length > 0) : []} else {// 弹出报错提示......}})},// 滚动onScroll(e) {this.scrollTop = e.detail.scrollTop},// 滚动到顶部toTop() {this.activeLetter = '↑'this.scrollTop = 0},// 滚动到星标好友toStar() {},// 滚动到某个字母位置toLetter(e) {this.activeLetter = eif (e == '#') {this.toView = 'intoView_'} else {this.toView = 'intoView' + e}},handleTouchEnd() {setTimeout(() => {this.activeLetter = ''}, 600)}
}
.main-container {width: 100%;height: 100%;padding: 20rpx 40rpx 0 24rpx;box-sizing: border-box;overflow-y: auto;position: relative;.member-list {box-sizing: border-box;.list-wrap {margin-top: 30rpx;.category {font-size: 24rpx;font-weight: 500;color: #adb3ba;line-height: 32rpx;margin-bottom: 20rpx;}.list-item {display: flex;align-items: center;margin-bottom: 40rpx;&-img {width: 70rpx;height: 70rpx;background: #d8d8d8;flex-shrink: 0;border-radius: 50%;}&-name {flex: 1;font-size: 28rpx;font-weight: 500;color: #2d3f49;line-height: 36rpx;padding: 20rpx 16rpx 14rpx;}&-btn {font-size: 24rpx;font-weight: 500;color: #ff466d;line-height: 32rpx;padding: 14rpx 21rpx;flex-shrink: 0;background: #ffedf1;border-radius: 36rpx;}}.list-item:last-child {margin-bottom: 0;}}.last-wrap:last-of-type {padding-bottom: 30rpx;}}.letter-list {width: 32rpx;text-align: center;position: absolute;top: 50%;right: 6rpx;transform: translateY(-50%);.letter-item {width: 32rpx;height: 32rpx;display: flex;align-items: center;justify-content: center;font-size: 22rpx;font-weight: 500;color: #999999;line-height: 32rpx;}.active {width: 32rpx;height: 32rpx;background: #fb5c4e;color: #fff;border-radius: 50%;}}
}
相关文章:
【uniapp】仿微信通讯录列表实现
效果图 代码实现 <view class"main-container"><!-- 成员列表 --><scroll-viewclass"member-list":style"computedHeight":scroll-y"true":enable-back-to-top"true":scroll-with-animation"true"…...
[MT8766][Android12] 增加应用安装白名单或者黑名单
文章目录 开发平台基本信息问题描述解决方法 开发平台基本信息 芯片: MT8766 版本: Android 12 kernel: msm-4.19 问题描述 在项目开发的时候,经常有一些客户,要求系统安装应用的时候需要进行验签;也就是系统默认不允许任何应用安装&#…...
游戏公司数据分析师必备知识(持续补充中...)
1.如何撰写专题报告? ①原则 只有一个主题:即使不讲ppt,业务方也能看得懂行文通俗简单易懂:学习产品经理平常是如何写报告的明确的数据结论和落地项先行:跟业务方多沟通数据结论,让他们给出落地项 ②结构…...
intellj 开发软件插件
IDEA: .ignore Alibaba Java Coding Guidelines(XenoAmess TPM) Chinese (Simplified) Language Pack / 中文语言包 CodeGlance Pro Gitee Grep Console Json Formatter Maven Helper Nyan Progress Bar One Dark theme Python Rainbow Brackets Resource Bundle Ed…...
leetCode 493 翻转对
给定一个数组 nums ,如果 i < j 且 nums[i] > 2*nums[j] 我们就将 (i, j) 称作一个重要翻转对。你需要返回给定数组中的重要翻转对的数量。 未完待续~...
“辛巴猫舍”内网渗透、提权、撞库学习笔记
前言: 在拿到靶机时,我们最先需要做的是信息收集,包括不限于:C段扫描,端口探测,指纹识别,版本探测等。其次就是 漏洞挖掘、漏洞利用、提权、维持权限、日志清理、留下后门。 以上就是渗透的基本…...
粤嵌实训医疗项目--day06(Vue + SpringBoot)
往期回顾 粤嵌实训医疗项目(小组开发)--day05-CSDN博客粤嵌实训医疗项目--day04(Vue SpringBoot)-CSDN博客粤嵌实训医疗项目--day03(Vue SpringBoot)-CSDN博客粤嵌实训医疗项目day02(Vue SpringBoot)-CS…...
SPSS二元Logistic回归
前言: 本专栏参考教材为《SPSS22.0从入门到精通》,由于软件版本原因,部分内容有所改变,为适应软件版本的变化,特此创作此专栏便于大家学习。本专栏使用软件为:SPSS25.0 本专栏所有的数据文件请点击此链接下…...
前端-第一部分-HTML
一.初识HTML 1.1 HTML 简介 HTML 全称为 HyperText Mark-up Language,翻译为超文本标签语言,标签也称作标记或者元素。HTML 是目前网络上应用最为广泛的技术之一,也是构成网页文档的主要基石之一。HTML文本是由 HTML 标签组成的描述性文本&a…...
六度空间(C++)
目录 题目: 输入、输出格式: 代码: 运行结果: 题目: 输入、输出格式: 代码: #include<iostream> #include<algorithm> using namespace std; int g[10005][10005]; float n…...
记录undefined reference to `SSLv3_client_method‘错误笔记
libcurl.a(libcurl_la-openssl.o): in function ossl_connect_step1: openssl.c:(.text0x3ca8): undefined reference to SSLv3_client_method 我个人环境原因:编译选项指定了某个openssl目录,此目录下有libcrypto.a libssl.a 解决方法:…...
JS算法练习 11.11
leetcode 2619 数组原型对象的最后一个元素 请你编写一段代码实现一个数组方法,使任何数组都可以调用 array.last() 方法,这个方法将返回数组最后一个元素。如果数组中没有元素,则返回 -1 。 你可以假设数组是 JSON.parse 的输出结果。 示例…...
50代码审计-PHP无框架项目SQL注入挖掘
代码设计分为有框架和无框架 挖掘技巧:随机挖掘,定点挖掘,批量挖掘(用工具帮助扫描探针,推荐工具:fortify,seay系统)。 1.教学计划: ---审计项目漏洞 Demo->审计思…...
什么是微服务?与分布式又有什么区别?
什么是微服务,我们先从传统的单体结构进行了解,对两者进行对比。 单体结构 单体结构是一种传统的软件架构模式,它将应用程序划分为一组相互依赖的模块和组件。这些模块和组件通常都是构建在同一个平台上的,并且紧密耦合在一起。…...
案例 | 3D可视化工具HOOPS助力SolidWorks edrawings成功引入AR/VR技术
HOOPS中文网慧都科技是HOOPS全套产品中国地区指定授权经销商,提供3D软件开发工具HOOPS售卖、试用、中文试用指导服务、中文技术支持。http://techsoft3d.evget.com/达索系统SolidWorks面临的挑战 达索系统SolidWorks公司开发和销售三维CAD设计软件、分析软件和产品…...
初识Linux:目录路径
目录 提示:以下指令均在Xshell 7 中进行 一、基本指令: 二、文件 文件内容文件属性 三、ls 指令拓展 1、 ls -l : 2、ls -la: 3、ls [目录名] : 4、ls -ld [目录名]: 四、Linux中的文件和…...
抖音小程序开发:探索技术创新的代码之旅
随着抖音小程序的兴起,企业纷纷将目光投向这个充满活力的平台。抖音小程序开发不仅为品牌提供了更广泛的曝光机会,更是技术创新的舞台。本文将带领读者深入探索抖音小程序开发的技术要点,探讨如何通过代码实现个性化、高效的小程序。 1. 小…...
公司注册股东选择几个人合适?
创业初期很多创业者都会选择有注册有限责任公司,有限责任由五十个以下的股东出资设立,每个股东以其所认缴的出资额为限对公司承担有限责任。那么问题来了股东人数选择几个最合适呢,下面上海注册公司网(www.91kaiye.cn)…...
大数据治理——为业务提供持续的、可度量的价值(二)
第二部分:元数据集成体系结构 在明确了元数据管理策略后需要确定实现该管理策略所需的技术体系结构,即元数据集成体系结构。元数据集成体系结构涉及到多个概念,如元模型、元-元模型、公共仓库元模型(CWM)等࿰…...
前端安全方面有哪些攻击方式?
在前端开发中,存在一些常见的安全攻击方式。以下是一些常见的前端安全攻击方式: 1:跨站脚本攻击(XSS): XSS攻击是指攻击者通过在网页中注入恶意脚本,使得用户在浏览器中执行该脚本,…...
SmartEnum扩展包深度探索:AutoFixture、GuardClauses等工具的最佳实践
SmartEnum扩展包深度探索:AutoFixture、GuardClauses等工具的最佳实践 【免费下载链接】SmartEnum A base class for quickly and easily creating strongly typed enum replacements in C#. 项目地址: https://gitcode.com/gh_mirrors/smar/SmartEnum Smart…...
为什么ModelMapper是Java开发者的必备工具:解决复杂对象映射的完整方案
为什么ModelMapper是Java开发者的必备工具:解决复杂对象映射的完整方案 【免费下载链接】modelmapper Intelligent object mapping 项目地址: https://gitcode.com/gh_mirrors/mo/modelmapper ModelMapper是一款智能对象映射工具,专为Java开发者设…...
深入剖析C# OPC UA 服务器端源码:纯代码实现,无第三方支持库
C# OPC UA 服务器端源码 该源码未使用任何第三方支持库,纯代码实现一、项目概述 该源码是一个基于 C# 语言开发的 OPC UA 服务器端实现,未依赖任何第三方支持库,采用纯原生代码构建,遵循 OPC UA 规范,提供了完整的工业…...
基于c/c++实现linux/windows跨平台获取ntp网络时间戳
目录使用场景c/c源码结果验证windows编译命令linux编译命令输出结果使用场景 在项目中,有时需要根据时钟同步做一些操作,例如网络请求、多设备视频同步播放等。 在多设备同步播放视频的环境中,我们可以定时请求网络时间,并根据每…...
Java的Switch表达式中的箭头语法与传统case语句在代码风格上的演进
Java语言在长期演进中不断优化语法结构,其中Switch表达式的箭头语法与传统case语句的对比尤为典型。从JDK 12引入预览特性到JDK 14正式落地,箭头语法通过更简洁的形式改变了开发者处理多分支逻辑的方式。这种演进不仅提升了代码可读性,还反映…...
Path of Building:流放之路构建思维的革命性重塑
Path of Building:流放之路构建思维的革命性重塑 【免费下载链接】PathOfBuilding Offline build planner for Path of Exile. 项目地址: https://gitcode.com/GitHub_Trending/pa/PathOfBuilding 如果你曾经在《流放之路》的复杂天赋树前感到迷茫࿰…...
Unlock Music:3分钟解锁加密音乐,让付费歌曲真正属于你
Unlock Music:3分钟解锁加密音乐,让付费歌曲真正属于你 【免费下载链接】unlock-music 在浏览器中解锁加密的音乐文件。原仓库: 1. https://github.com/unlock-music/unlock-music ;2. https://git.unlock-music.dev/um/web 项目…...
排查Android显示问题:手把手教你定位/dev/dri/card0与DRM驱动加载
Android显示异常排查实战:从DRM驱动加载到card0节点生成的深度解析 当Android设备遭遇黑屏、花屏或显示异常时,底层DRM(Direct Rendering Manager)驱动的加载状态往往是首要怀疑对象。本文将带您深入/dev/dri/card0与/sys/class/d…...
别再只画时频图了!用Python的scipy.signal.stft函数,深入理解STFT的幅度谱与相位谱
深入解析STFT:从幅度谱与相位谱中挖掘信号处理的黄金信息 信号处理工程师们常把短时傅立叶变换(STFT)当作时频分析的标准工具,但大多数人只停留在绘制时频图的层面。当我们打开一个音频文件或振动传感器数据时,那个色彩斑斓的时频图确实能直观…...
3个关键步骤掌握专业PDF文档翻译:BabelDOC让学术论文翻译不再困难
3个关键步骤掌握专业PDF文档翻译:BabelDOC让学术论文翻译不再困难 【免费下载链接】BabelDOC Yet Another Document Translator 项目地址: https://gitcode.com/GitHub_Trending/ba/BabelDOC 还在为复杂的学术论文翻译而烦恼吗?BabelDOC是一款革命…...
