uniapp:聊天消息列表(好友列表+私人单聊)支持App、H5、小程序

  

  

🎬 江城开朗的豌豆:个人主页

 🔥 个人专栏 :《 VUE 》 《 javaScript 》

 📝 个人网站 :《 江城开朗的豌豆🫛 》 

⛺️ 生活的理想,就是为了理想的生活 !

在这里插入图片描述

目录

 ⭐  文章简介(效果图展示)        

  📟 插件传送门:聊天消息列表

 📘  文章背景

  📘 平台兼容性

 📘  功能实现

废话不说直接上代码

 📟 用户列表完整代码

 📟 单人对话框 完整代码 

🔥 文章总结

📟 隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:


 ⭐  文章简介(效果图展示)

      在现代社交互动中,聊天消息列表是应用程序中的关键组成部分。它不仅仅是一种通信工具,更是人们日常生活中连接感情、分享信息的重要方式之一。随着移动互联网的发展,用户在不同平台上(如App、H5、小程序等)进行聊天的需求也愈发增加。因此,设计并实现一个支持多平台、多种形式的聊天消息列表成为了开发者们的挑战之一。

        

    📟 插件传送门:聊天消息列表

 📘  文章背景

        

       最近我专注于优化我们聊天消息列表的交互体验。现在,我们的消息列表页面上有多个标签,每个标签对应着不同的聊天会话。当用户点击某个标签时,页面会流畅地滚动到相应的聊天记录位置,这样用户就可以更方便地查看他们感兴趣的对话内容。

      今天下午,我花了些时间在消息列表的交互功能上进行调整和改进。经过一番努力,我成功地实现了这一功能!在这个过程中,我逐步解决了各种技术挑战,体验着一个个问题被一一击破的成就感。这种改进用户体验的过程真是让人感到无比满足!

  📘 平台兼容性

Vue2Vue3
App快应用微信小程序支付宝小程序百度小程序字节小程序QQ小程序
HBuilderX 3.6.11 app-vue app-nvue
钉钉小程序快手小程序飞书小程序京东小程序
H5-SafariAndroid Browser微信浏览器(Android)QQ浏览器(Android)ChromeIEEdgeFirefoxPC-Safari

 📘  功能实现

废话不说直接上代码

 📟 用户列表完整代码

<template><view class="page"><view class="list-item" v-for="(item,index) in users" :key="index" @click="connect(item)"><view class="avatar"><text class="round" v-if="item.read"></text><image :src="item.avatar" mode="widthFix"></image></view><view class="content"><view class="title"><text class="name">{{ item.name }}</text><text class="time">{{ item.time }}</text></view><view class="txt">{{ item.msg }}</view></view></view></view>
</template><script>export default {data() {return {options: [{text: '取消',style: {backgroundColor: '#007aff'}}, {text: '确认',style: {backgroundColor: '#dd524d'}}],users: [{avatar: '/static/avatar/avatar1.png',name: '杨涛',read: 1,time: '23:59',msg: '没有消息就是最好的消息'},{avatar: '/static/avatar/avatar2.jpg',name: '雨中漫步',read: 1,time: '23:59',msg: '没有消息就是最好的消息'},{avatar: '/static/avatar/avatar3.jpeg',name: '糖果梦境',read: 1,time: '23:59',msg: '没有消息就是最好的消息'},{avatar: '/static/avatar/avatar4.png',name: '海上日落',read: 1,time: '23:59',msg: '没有消息就是最好的消息'},{avatar: '/static/avatar/avatar6.png',name: '男朋友',read: 1,time: '23:59',msg: '没有消息就是最好的消息'},{avatar: '/static/avatar/avatar8.png',name: '女朋友',read: 1,time: '23:59',msg: '没有消息就是最好的消息'},{avatar: '/static/avatar/avatar5.jpeg',name: '静谧之夜',read: 1,time: '23:59',msg: '没有消息就是最好的消息'},{avatar: '/static/avatar/avatar1.png',name: '风吹麦浪',read: 0,time: '23:59',msg: '没有消息就是最好的消息'},{avatar: '/static/avatar/avatar1.png',name: '路过岁月',read: 0,time: '23:59',msg: '没有消息就是最好的消息'},{avatar: '/static/avatar/avatar1.png',name: '繁星点点',read: 0,time: '23:59',msg: '没有消息就是最好的消息'}]};},methods: {onClick(e) {console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')},swipeChange(e, index) {console.log('当前状态:' + e + ',下标:' + index)},connect(item) {uni.navigateTo({url: `/pages/message/message?name=${item.name}&avatar=${item.avatar}`})}}}
</script><style lang="scss" scoped>.page {padding: 0 32rpx;color: #333;}.list-item {display: flex;padding: 30rpx 0;border-bottom: 1px solid #ccced3;.avatar {width: 90rpx;height: 90rpx;border-radius: 10rpx;margin-right: 20rpx;position: relative;.round {position: absolute;width: 14rpx;height: 14rpx;border-radius: 50%;background: #ef5656;top: -4rpx;right: -4rpx;z-index: 1;}image {width: 100%;height: 100%;border-radius: 10rpx;}}.content {flex: 1;.title {display: flex;justify-content: space-between;.name {font-weight: bold;}.time {color: #999;font-size: 24rpx;}}.txt {margin-top: 10rpx;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;text-align: left;color: #999;font-size: 26rpx;}}}
</style>
 📟 单人对话框 完整代码

<template><view class="page"><scroll-view class="scroll-view" scroll-y scroll-with-animation :scroll-top="top"><view style="padding: 30rpx 30rpx 240rpx;"><view class="message" :class="[item.userType]" v-for="(item,index) in list" :key="index"><image :src="item.avatar" v-if="item.userType === 'friend'" class="avatar" mode="widthFix"></image><view class="content" v-if="item.messageType === 'image'"><image :src="item.content" mode="widthFix"></image></view><view class="content" v-else>{{ item.content }}</view><image :src="item.avatar" v-if="item.userType === 'self'" class="avatar" mode="widthFix"></image></view></view></scroll-view><view class="tool"><input type="text" v-model="content" class="input" @confirm="send" /><image src="/static/photo.png" mode="widthFix" class="thumb" @click="chooseImage"></image></view></view>
</template><script>export default {data() {return {content: '',list: [],top: 0};},onLoad(options) {uni.setNavigationBarTitle({title: options.name})this._friendAvatar = options.avatarthis._selfAvatar = '/static/avatar/avatar5.jpeg'this.list = [{content: '对方历史回复消息',userType: 'friend',avatar: this._friendAvatar},{content: '历史消息',userType: 'self',avatar: this._selfAvatar}]},methods: {send() {this.list.push({content: this.content,userType: 'self',avatar: this._selfAvatar})this.content = ''this.scrollToBottom()// 模拟对方回复setTimeout(()=>{this.list.push({content: '周末什么安排',userType: 'friend',avatar: this._friendAvatar})this.scrollToBottom()}, 1500)},chooseImage() {uni.chooseImage({// sourceType: 'album',success: (res) => {this.list.push({content: res.tempFilePaths[0],userType: 'self',messageType: 'image',avatar: this._selfAvatar})this.scrollToBottom()// 模拟对方回复setTimeout(()=>{this.list.push({content: '你好呀,朋友~',userType: 'friend',avatar: this._friendAvatar})this.scrollToBottom()}, 1500)}})},scrollToBottom() {this.top = this.list.length * 1000}}}
</script><style lang="scss" scoped>.scroll-view {/* #ifdef H5 */height: calc(100vh - 44px);/* #endif *//* #ifndef H5 */height: 100vh;/* #endif */background: #eee;box-sizing: border-box;}.message {display: flex;align-items: flex-start;margin-bottom: 30rpx;.avatar {width: 80rpx;height: 80rpx;border-radius: 10rpx;margin-right: 30rpx;}.content {min-height: 80rpx;max-width: 60vw;box-sizing: border-box;font-size: 28rpx;line-height: 1.3;padding: 20rpx;border-radius: 10rpx;background: #fff;image {width: 200rpx;}}&.self {justify-content: flex-end;.avatar {margin: 0 0 0 30rpx;}.content {position: relative;&::after {position: absolute;content: '';width: 0;height: 0;border: 16rpx solid transparent;border-left: 16rpx solid #fff;right: -28rpx;top: 24rpx;}}}&.friend {.content {position: relative;&::after {position: absolute;content: '';width: 0;height: 0;border: 16rpx solid transparent;border-right: 16rpx solid #fff;left: -28rpx;top: 24rpx;}}}}.tool {position: fixed;width: 100%;min-height: 120rpx;left: 0;bottom: 0;background: #fff;display: flex;align-items: flex-start;box-sizing: border-box;padding: 20rpx 24rpx 20rpx 40rpx;padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)/2) !important;padding-bottom: calc(20rpx + env(safe-area-inset-bottom)/2) !important;.input {background: #eee;border-radius: 10rpx;height: 70rpx;margin-right: 30rpx;flex: 1;padding: 0 20rpx;box-sizing: border-box;font-size: 28rpx;}.thumb {width: 64rpx;}}
</style>

 

🔥 文章总结

📟 隐私、权限声明

         如说明表达还不够清楚,不清楚怎么使用可导入完整示例项目运行体验和希望对大家有帮助!

1. 本插件需要申请的系统权限列表:

无,开箱即用

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

没有任何广告,纯分享,方便自己,同时也方便其他能用的的前端好朋友

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

使用插件有任何问题欢迎加入QQ讨论群:

作者QQ群:906392632(未满)

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

最后感谢各位的耐心观看,既然都到这了,点个 👍赞再走吧!

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

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

相关文章

2024-04-10 Linux gzip 和 gunzip 命令,gzip 压缩的文件通常比原始文件小得多。

一、gzip 是 Linux 系统中用于压缩文件的命令&#xff0c;它通常用于将单个文件压缩成 .gz 格式的文件。gzip 压缩的文件通常比原始文件小得多&#xff0c;因此它在节省磁盘空间和减少文件传输时间方面非常有用。 gzip 命令的基本语法如下&#xff1a; gzip [选项] [文件]复制…

Vue3学习01 Vue3核心语法

Vue3学习 1. Vue3新的特性 2. 创建Vue3工程2.1 基于 vue-cli 创建项目文件说明 2.2 基于 vite 创建具体操作项目文件说明 2.3 简单案例(vite) 3. Vue3核心语法3.1 OptionsAPI 与 CompositionAPIOptions API 弊端Composition API 优势 ⭐3.2 setup小案例setup返回值setup 与 Opt…

ssm038汽车养护管理系统+jsp

汽车养护管理系统设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本汽车养护管理系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短…

保姆级教程带你实现HarmonyOS手语猜一猜元服务(二)

由于文章篇幅较长&#xff0c;共分为了三篇发布&#xff1a; 保姆级教程带你实现HarmonyOS手语猜一猜元服务&#xff08;一&#xff09; 保姆级教程带你实现HarmonyOS手语猜一猜元服务&#xff08;二&#xff09; 保姆级教程带你实现HarmonyOS手语猜一猜元服务&#xff08;三&…

微信小程序页面交互综合练习 (重点:解决“setData of undefined”报错问题)

一、写一个注册表单&#xff0c;点击“注册”按钮将用户输入的数据带到服务器&#xff0c;并且能在控制台显示参数。 &#xff08;1&#xff09;首先&#xff0c;我需要在vscode里面创建一个简易的node.js服务器 //第一步:引入http模块 var http require(http); //第二步:创建…

自动驾驶定位算法-粒子滤波(Particle Filter)

自动驾驶定位算法-粒子滤波(Particle Filter) 自动驾驶对定位的精度的要求在厘米级的&#xff0c;如何实现厘米级的高精度定位呢&#xff1f;一种众所周知的定位方法是利用全球定位系统(GPS)&#xff0c;利用多颗卫星的测量结果&#xff0c;通过三角测量(Triangulation)机制确…

spring-cloud微服务openfeign

Spring Cloud openfeign对Feign进行了增强&#xff0c;使其支持Spring MVC注解&#xff0c;另外还整合了Ribbon和Nacos&#xff0c;从而使得Feign的使用更加方便 优势&#xff0c;openfeign可以做到使用HTTP请求远程服务时就像洞用本地方法一样的体验&#xff0c;开发者完全感…

自己动手封装axios通用方法并上传至私有npm仓库:详细步骤与实现指南

文章目录 一、构建方法1、api/request.js2、api/requestHandler.js3、api/index.js 二、测试方法1、api/axios.js2、main.js3、app.vue4、vue.config.js5、index.html 三、打包1、配置package.json2、生成库包3、配置发布信息4、发布 四、使用1、安装2、使用 五、维护1、维护和…

M1 Flutter SDK的安装和环境配置

前言 作为iOS 开发&#xff0c;观望了许久的Flutter &#xff0c;还是对它下手了&#xff0c;不是故意要卷&#xff0c;没办法工作需要&#xff01;既然要学Flutter&#xff0c;首先就得配置Flutter的相关环境&#xff0c;由于我的是M1 芯片的电脑&#xff0c;记录下来配置过程…

spring boot 集成 flyway依赖 做数据库迁移,让部署没烦恼

flyway 是一个敏捷工具&#xff0c;用于数据库的移植。采用 Java 开发&#xff0c;支持所有兼容 JDBC 的数据库。 主要用于在你的应用版本不断升级的同时&#xff0c;升级你的数据库结构和里面的数据。 还是直接上代码 第一步&#xff1a; <!-- Flyway 数据库迁移 依赖 他…

python爬虫-------JsonPath(第十九天)

&#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; &#x1f388;&#x1f388;所属专栏&#xff1a;python爬虫学习&#x1f388;&#x1f388; ✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天…

【一学就会】(一)C++编译工具链——基于VSCode的CMake、make与g++简单理解与应用示例

目录 一、CMake、make与g 1、名词辨析 2、孰优孰劣 二、应用示例 1、工具类安装与配置 1&#xff09;VSCode安装与配置 2&#xff09;CMake下载与安装 3&#xff09;MinGW-W64下载与安装 A、科学上网法 B、无需科学上网法 4&#xff09;VSCode推荐插件 A、c/c编译环…

Linux/Ubuntu/Debian中与进程和系统资源有关的命令top/ps

top命令是Linux系统中非常实用的一个工具&#xff0c;其主要功能是展示当前系统中资源使用情况最高的进程列表。通过这个命令&#xff0c;我们可以一目了然地看到哪些进程正在消耗大量的CPU、内存等资源。top命令默认每3秒更新一次数据&#xff0c;提供了实时的系统资源状态&am…

【Qt 学习笔记】QWidget的geometry属性及window frame的影响

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ QWidget的geometry属性 文章编号&#xff1a;Qt 学习笔记 / 16 文章目…

BK-SDM读图片逻辑-评估结果FID逻辑

以inherit为例 这是借助bksdm的代码用于我的A-sdm的生成 bksdm中2个关键路径是 src/genetate.py script/eval_scores.sh 一 以generate.py文件进行生成 借助ms-coco的csv文件里面的30K个提示词和图片名字&#xff0c;来生成图片&#xff0c;并保存 share/huanggao/zjc/code_i2…

【智能算法】省时方便,智能算法统计指标——一键运行~

目录 1.常用统计指标2.参数统计检验3.结果展示4.自定义修改测试框架 1.常用统计指标 测试智能算法性能时&#xff0c;常常会用到以下5种常用指标&#xff0c;简单不赘述&#xff1a; 最优值、最差值、均值、中位数、标准差 2.参数统计检验 单纯依靠常用统计指标说服力不足&…

07 Php学习:运算符

PHP 算术运算符 在 PHP 中&#xff0c;算术运算符用于执行基本的数学运算&#xff0c;包括加法、减法、乘法、除法、取余数&#xff0c;负数运算、取反和并置运算。以下是这些运算符的详细解释和示例&#xff1a; 加法运算符 &#xff1a;用于将两个数值相加。 $a 5; $b 3;…

初识--数据结构

什么是数据结构&#xff1f;我们为什么要学习数据结构呢....一系列的问题就促使我们不得不了解数据结构。我们不禁要问了&#xff0c;学习C语言不就够了吗&#xff1f;为什么还要学习数据结构呢&#xff1f;这是因为&#xff1a;数据结构能够解决C语言解决不了的问题&#xff0…

【Java基础题型】矩阵的对角线求和

一、题目-矩阵 求一个33矩阵对角线元素之和。 输入格式 矩阵 输出格式 主对角线 副对角线 元素和 样例输入 1 2 3 1 1 1 3 2 1 样例输出 3 7 二、参考的知识 这里给大家送点英语单词&#xff0c;记得学习&#xff1a; p r i m a r y. adj.主要的&#xff1b;初…

软考中级之软件设计师---知识点汇总总结

软考中级之软件设计师---知识点汇总总结 软考介绍资格设置证书样本 计算机组成原理操作系统1. 进程的三态模型2. 磁盘调度算法 计算机网络1. 网络的分类2. 各层的互连设备3. 网络模型&#xff0c;协议簇4. 传输层协议TCP、UDP4.1 TCP (Transmission Control Protocol,传输控制协…