聊一聊小程序单聊页面构思

主题界面构建

  1. 主题界面构建可以有很多种做法,一种为左右平分式UI设计,简单来说就是对方和我方聊天DOM各占屏幕的一半,完全可以使用flex的布局以及vw构建,一种吧聊天内容作为整体聊天界面的子节点,聊天container内容的高度,可以动态的减去底部聊天框的UI高度
  2. 聊天框固定高度,有两个坑点需要注意,在真机调试过程中,点击input,键盘弹起之后会自动把整体界面往上弹,可以选择 :adjust-position="false",来关闭input获取焦点时避免影响其他DOM,需要做到唤醒键盘底部聊天框跟随键盘往上弹的一个过程,当键盘弹起,动态获取键盘高度,来调整底部聊天框距离底部的margin值
  3. 聊回双方聊天,根据后端或静态数据的属性,判断发送消息的人是谁,如果有不同类型的DOM需要发送,可定义不同组件来根据发送类型作为用户的输出,比如 image,列表,文件...等等

差不多需要注意的就这些,还是用集群的好,自己写的话性价比太低

如果需要做到群组聊天,梳理好数据逻辑,进行数据的分组,可以去看看别的博客介绍群聊功能

相关推荐
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差2 天前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张2 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬2 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106322 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI2 天前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_177297220692 天前
短剧小程序系统开发:打造个性化娱乐新平台
小程序·娱乐·短剧
weixin_lynhgworld2 天前
剧本杀小程序系统开发:开启沉浸式社交娱乐新纪元
小程序·娱乐
~废弃回忆 �༄2 天前
mobx-miniprogram小程序的数据传输
小程序