当前位置: 首页 > news >正文

【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 问题描述 在项目开发的时候&#xff0c;经常有一些客户&#xff0c;要求系统安装应用的时候需要进行验签&#xff1b;也就是系统默认不允许任何应用安装&#…...

游戏公司数据分析师必备知识(持续补充中...)

1.如何撰写专题报告&#xff1f; ①原则 只有一个主题&#xff1a;即使不讲ppt&#xff0c;业务方也能看得懂行文通俗简单易懂&#xff1a;学习产品经理平常是如何写报告的明确的数据结论和落地项先行&#xff1a;跟业务方多沟通数据结论&#xff0c;让他们给出落地项 ②结构…...

intellj 开发软件插件

IDEA&#xff1a; .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 &#xff0c;如果 i < j 且 nums[i] > 2*nums[j] 我们就将 (i, j) 称作一个重要翻转对。你需要返回给定数组中的重要翻转对的数量。 未完待续~...

“辛巴猫舍”内网渗透、提权、撞库学习笔记

前言&#xff1a; 在拿到靶机时&#xff0c;我们最先需要做的是信息收集&#xff0c;包括不限于&#xff1a;C段扫描&#xff0c;端口探测&#xff0c;指纹识别&#xff0c;版本探测等。其次就是 漏洞挖掘、漏洞利用、提权、维持权限、日志清理、留下后门。 以上就是渗透的基本…...

粤嵌实训医疗项目--day06(Vue + SpringBoot)

往期回顾 粤嵌实训医疗项目(小组开发)--day05-CSDN博客粤嵌实训医疗项目--day04&#xff08;Vue SpringBoot&#xff09;-CSDN博客粤嵌实训医疗项目--day03&#xff08;Vue SpringBoot&#xff09;-CSDN博客粤嵌实训医疗项目day02&#xff08;Vue SpringBoot&#xff09;-CS…...

SPSS二元Logistic回归

前言&#xff1a; 本专栏参考教材为《SPSS22.0从入门到精通》&#xff0c;由于软件版本原因&#xff0c;部分内容有所改变&#xff0c;为适应软件版本的变化&#xff0c;特此创作此专栏便于大家学习。本专栏使用软件为&#xff1a;SPSS25.0 本专栏所有的数据文件请点击此链接下…...

前端-第一部分-HTML

一.初识HTML 1.1 HTML 简介 HTML 全称为 HyperText Mark-up Language&#xff0c;翻译为超文本标签语言&#xff0c;标签也称作标记或者元素。HTML 是目前网络上应用最为广泛的技术之一&#xff0c;也是构成网页文档的主要基石之一。HTML文本是由 HTML 标签组成的描述性文本&a…...

六度空间(C++)

目录 题目&#xff1a; 输入、输出格式&#xff1a; 代码&#xff1a; 运行结果&#xff1a; 题目&#xff1a; 输入、输出格式&#xff1a; 代码&#xff1a; #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 我个人环境原因&#xff1a;编译选项指定了某个openssl目录&#xff0c;此目录下有libcrypto.a libssl.a 解决方法&#xff1a;…...

JS算法练习 11.11

leetcode 2619 数组原型对象的最后一个元素 请你编写一段代码实现一个数组方法&#xff0c;使任何数组都可以调用 array.last() 方法&#xff0c;这个方法将返回数组最后一个元素。如果数组中没有元素&#xff0c;则返回 -1 。 你可以假设数组是 JSON.parse 的输出结果。 示例…...

50代码审计-PHP无框架项目SQL注入挖掘

代码设计分为有框架和无框架 挖掘技巧&#xff1a;随机挖掘&#xff0c;定点挖掘&#xff0c;批量挖掘&#xff08;用工具帮助扫描探针&#xff0c;推荐工具&#xff1a;fortify&#xff0c;seay系统&#xff09;。 1.教学计划&#xff1a; ---审计项目漏洞 Demo->审计思…...

什么是微服务?与分布式又有什么区别?

什么是微服务&#xff0c;我们先从传统的单体结构进行了解&#xff0c;对两者进行对比。 单体结构 单体结构是一种传统的软件架构模式&#xff0c;它将应用程序划分为一组相互依赖的模块和组件。这些模块和组件通常都是构建在同一个平台上的&#xff0c;并且紧密耦合在一起。…...

案例 | 3D可视化工具HOOPS助力SolidWorks edrawings成功引入AR/VR技术

HOOPS中文网慧都科技是HOOPS全套产品中国地区指定授权经销商&#xff0c;提供3D软件开发工具HOOPS售卖、试用、中文试用指导服务、中文技术支持。http://techsoft3d.evget.com/达索系统SolidWorks面临的挑战 达索系统SolidWorks公司开发和销售三维CAD设计软件、分析软件和产品…...

初识Linux:目录路径

目录 提示&#xff1a;以下指令均在Xshell 7 中进行 一、基本指令&#xff1a; 二、文件 文件内容文件属性 三、ls 指令拓展 1、 ls -l &#xff1a; 2、ls -la&#xff1a; 3、ls [目录名] &#xff1a; 4、ls -ld [目录名]&#xff1a; 四、Linux中的文件和…...

抖音小程序开发:探索技术创新的代码之旅

随着抖音小程序的兴起&#xff0c;企业纷纷将目光投向这个充满活力的平台。抖音小程序开发不仅为品牌提供了更广泛的曝光机会&#xff0c;更是技术创新的舞台。本文将带领读者深入探索抖音小程序开发的技术要点&#xff0c;探讨如何通过代码实现个性化、高效的小程序。 1. 小…...

公司注册股东选择几个人合适?

创业初期很多创业者都会选择有注册有限责任公司&#xff0c;有限责任由五十个以下的股东出资设立&#xff0c;每个股东以其所认缴的出资额为限对公司承担有限责任。那么问题来了股东人数选择几个最合适呢&#xff0c;下面上海注册公司网&#xff08;www.91kaiye.cn&#xff09;…...

大数据治理——为业务提供持续的、可度量的价值(二)

第二部分&#xff1a;元数据集成体系结构 在明确了元数据管理策略后需要确定实现该管理策略所需的技术体系结构&#xff0c;即元数据集成体系结构。元数据集成体系结构涉及到多个概念&#xff0c;如元模型、元-元模型、公共仓库元模型&#xff08;CWM&#xff09;等&#xff0…...

前端安全方面有哪些攻击方式?

在前端开发中&#xff0c;存在一些常见的安全攻击方式。以下是一些常见的前端安全攻击方式&#xff1a; 1&#xff1a;跨站脚本攻击&#xff08;XSS&#xff09;&#xff1a; XSS攻击是指攻击者通过在网页中注入恶意脚本&#xff0c;使得用户在浏览器中执行该脚本&#xff0c;…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

GraphQL 实战篇:Apollo Client 配置与缓存

GraphQL 实战篇&#xff1a;Apollo Client 配置与缓存 上一篇&#xff1a;GraphQL 入门篇&#xff1a;基础查询语法 依旧和上一篇的笔记一样&#xff0c;主实操&#xff0c;没啥过多的细节讲解&#xff0c;代码具体在&#xff1a; https://github.com/GoldenaArcher/graphql…...

高考志愿填报管理系统---开发介绍

高考志愿填报管理系统是一款专为教育机构、学校和教师设计的学生信息管理和志愿填报辅助平台。系统基于Django框架开发&#xff0c;采用现代化的Web技术&#xff0c;为教育工作者提供高效、安全、便捷的学生管理解决方案。 ## &#x1f4cb; 系统概述 ### &#x1f3af; 系统定…...