uni-app 实现仿微信界面【我的+首页聊天列表+长按菜单功能+添加菜单功能】+ 附源码

目录

【微信首页聊天列表】界面

【我的】界面

源代码:


文后附完整代码,支持一键导入 HBuilderX 示例体验

【微信首页聊天列表】界面

仿造【微信首页聊天列表 + 长按菜单功能 + 右上角添加按钮弹窗功能】,使用 uni-app 开发, 一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。

聊天列表展示包括头像、群头像、群头像、消息免打扰、强提醒消息,消息红点、消息条数角标、未读99 、长按展示功能菜单、右上角搜索、添加按钮弹窗菜单功能等

聊天列表页基于 uni-app 官方提供的 uni-list-chat 案例进行魔改;

如下图:

【我的】界面

仿造【微信我的界面 + 交互】,使用 uni-app 开发,一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。

如下图:

源代码:

实现仿微信界面【我的+首页聊天列表+长按菜单功能+添加菜单功能】 - DCloud 插件市场

仿微信 【我的】界面 - DCloud 插件市场

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

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

相关文章

深入浅出 -- 系统架构之微服务架构选型参考图

技术选型架构图 是一个用于展示项目中所采用的各种技术和组件之间关系的图表。 它通常包括以下几个部分: 1. 项目名称和描述:简要介绍项目的背景和目标。 2. 技术栈:列出项目中使用的主要技术和工具,如编程语言、框架、数据库…

JVM专题——类文件加载

本文部分内容节选自Java Guide和《深入理解Java虚拟机》, Java Guide地址: https://javaguide.cn/java/jvm/class-loading-process.html 🚀 基础(上) → 🚀 基础(中) → 🚀基础(下&a…

(免费分享)基于springboot,vue房屋租赁管理系统

功能说明: * 普通用户角色: 1. 寻找房源功能--提供了两种寻找房源的功能,一种是普通用户在平台上搜索、筛选主动寻找房源的功能,另一种是用户填写征集房源的条件,系统会持续将最新符合条件的房源推送给用户。 2. …

Vuex的模块化管理

1:定义一个单独的模块。由于mutation的第二个参数只能提交一个对象,所以这里的ThisLog是个json串。 2:在Vuex中的index.js中引入该模块 3:在别的组件中通过...mapState调用模块保存的State的值。 4:用...mapMutations修…

【番外篇2】统计学-方差分析

方差分析 方差分析(ANOVA)是一种用于比较三个或三个以上组之间平均值是否有显著差异的统计方法。通俗地说,就是用来确定不同组之间的平均值是否有显著差异。 让我们通过一个简单的例子来解释方差分析: 假设你是一位教育工作者&a…

界面控件Kendo UI for jQuery 2024 Q1亮点 - 新的ToggleButton组件

Telerik & Kendo UI 2024 Q1 版本于2024年初发布,在此版本中将AI集成到了UI组件中,在整个产品组合中引入AI Prompt组件以及10多个新的UI控件、支持Angular 17、多个数据可视化功能增强等。 P.S:Kendo UI for jQuery提供了在短时间内构建…

哲♂学家带你用顺序表实现通讯录

实现通讯录能使我们进一步加深对顺序表的理解,接下来就由本哲♂学家带你手把手实现通信录。 其中需要用到顺序表的知识可以点击下面链接了解:http://t.csdnimg.cn/9SjGd话不多说,我们♂开始吧。 一、通讯录头文件声明 由于我们前面已经写过…

四核8g服务器价格多少钱?

2024年腾讯云4核8G服务器租用优惠价格:轻量应用服务器4核8G12M带宽646元15个月,CVM云服务器S5实例优惠价格1437.24元买一年送3个月,腾讯云4核8G服务器活动页面 txybk.com/go/txy 活动链接打开如下图: 腾讯云4核8G服务器优惠价格 轻…

【数据结构】——二叉树的递归实现,看完不再害怕递归

创作不易,感谢三连加支持?! 一 递归理解 递归无非就是相信它,只有你相信它,你才能写好递归!为什么?请往下看 在进入二叉树的实现之前,我们得先理解一遍递归,可能很多…

Android JNI 调用第三方SO

最近一个项目使用了Go 编译了一个so库,但是这个so里面还需要使用第三方so库pdfium, 首先在Android工程把2个so库都放好 在jni中只能使用dlopen方式,其他的使用函数指针的方式来调用,和windows dll类似,不然虽然编译过了但是会崩溃…

基于H2O AutoML与集成学习策略的房屋售价预测模型研究与实现

项目简述: 本项目采用H2O AutoML工具,针对加州房屋销售价格预测问题进行了深入研究与建模。项目以Kaggle提供的加州房屋 交易数据集为基础,通过数据清洗、特征工程、模型训练与评估等步骤,构建了一种基于集成学习策略的房价预测模…

Flink运行机制相关概念介绍

Flink运行机制相关概念介绍 1. 流式计算和批处理2. 流式计算的状态与容错3. Flink简介及其在业务系统中的位置4. Flink模型5. Flink的架构6. Flink的重要概念7. Flink的状态、状态分区、状态缩放(rescale)和Key Group8. Flink数据交换9. 时间语义10. 水位…

GrayLog日志平台的基本使用-接入jumpserver

1、jumpserver3.8.0部署 Docker 环境准备 # 安装依赖包 yum install -y yum-utils device-mapper-persistent-data lvm2 # 添加源 yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo # 替换Docker 安装源为清华大学镜像站 sed -i sh…

Spring Web MVC的入门学习(一)

目录 一、什么是 Spring Web MVC 1、MVC 定义 二、学习Spring MVC 1、项目准备 2、建立连接 2.1 RequestMapping 注解的学习 2.2 RequestMapping 使用 3、请求 3.1 传递单个参数 3.2 传递多个参数 3.3 传递对象 3.4 后端参数重命名(后端参数映射&#xf…

1111111

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起学习和分享Linux、C、C、Python、Matlab,机器人运动控制、多机器人协作,智能优化算法,滤波估计、多传感器信息融合,机器学习,人工智能等相关领域的知识和…

配置code-server和texlive实现网页写tex

使用overleaf太卡了,有云服务器或者nas小主机,配置自己的code-servertexlive,来写论文。 之前用服务器配置过自己的overleaf,感觉不是很好用,缺少东西。 一、思路 使用docker先安装一个ubuntu,用dockerfil…

day63 单调栈part02

503. 下一个更大元素 II 中等 给定一个循环数组 nums ( nums[nums.length - 1] 的下一个元素是 nums[0] ),返回 nums 中每个元素的 下一个更大元素 。 数字 x 的 下一个更大的元素 是按数组遍历顺序,这个数字之后的第一个比它更…

【generate】如何维护一套icon组件库,直接输出svg为react component

https://github.com/ant-design/ant-design-web3/pull/761/files 实现了icon-preview(通过jsdoc, 鼠标放在组件上可以看到icon的样式),因为打包方式、产物以及命名上有一些不同,可能需要稍加改造。 这个同步脚本应该后续也用得上,略加改造同步…

Macbook文件清理软件 Mac电脑清理垃圾文件怎么清理

为了维护Macbook电脑的系统健康,我们需要定期给电脑进行全面清理,清除系统垃圾文件、软件缓存和系统内存。那么好用的Macbook文件清理软件有哪些呢?今天就给大家介绍几款好用的电脑清理软件并介绍Mac电脑清理垃圾文件怎么清理。 一、Macbook…

29-控制流(下):iam-apiserver服务核心功能实现讲解

我们再来看下 iam-apiserver 中的核心功能实现。 这些关键代码设计分为 3 类,分别是应用框架相关的特性、编程规范相关的特性和其他特性。 应用框架相关的特性 应用框架相关的特性包括三个,分别是优雅关停、健康检查和插件化加载中间件。 优雅关停 …