关于uniapp开发微信小程序,实现聊天消息,最新消息最底部展示
关于uniapp开发微信小程序,实现聊天消息最新消息最底部展示
实现消息最底部展示
uniapp\vue
页面布局
此处我觉得最要注意的点就是看是谁产生的滚动条。
逻辑书写
关键字: scrollTop,scrollHeight
methods:{
scrollChat(){//利用了$nextTick,dom完成后才运行的函数this.$nextTick(()=>{//此处非常需要注意的是,dom元素必须是产生滚动条的那个dom,不然会失效,获取不了滚动条的高度//就这一个问题我反复尝试,才发现的这个问题
let container = document.querySelector('#chat');container.scrollTop = container.scrollHeight;
console.log('container.scrollHeight', container.scrollHeight, 'container.scrollTop', container.scrollTop);})
}
},
mounted() {// 页面首次展示时滚动条定位底部this.scrollChat()
},
updated() {// 在接收到新消息的时候触发方法将滚动条定位到底部this.scrollChat()
},
最终效果展示
录制的聊天功能
关于uniapp开发微信小程序,实现聊天消息,最新消息最底部展示相关推荐
- uniapp开发微信小程序设置分包,简单易学(图解)
我们使用uniapp开发微信小程序的时候,当我们的包体积过大的时候,无法真机模拟 因为小程序单个包只支持2MB,所以这时候我们要选择去分包. 有人要问了分包难吗?分包很简单.但是 最重要的来了,分包这 ...
- uni-app开发微信小程序使用微信小程序的插件
假如使用uni-app开发微信小程序需要用到官方插件----OCR插件, 插件地址如下: OCR插件 申请方式见插件地址介绍.本文主要记录调用方式 1.在manifest.json的"mp- ...
- Uni-app开发微信小程序使用本地图片做背景图
Uni-app开发微信小程序使用本地图片做背景图 <view class="content" :style="{backgroundImage:'url(' + i ...
- uniapp开发微信小程序,从构建到上线
前言: 本文主要介绍 uniapp 的基础使用,以及使用 uniapp 在企业开发的过程中的一个详细流程,比较适合第一次使用uniapp 开发微信小程序的伙伴,或者没有过实战经验的小伙伴参考:使用 H ...
- uniapp开发微信小程序分享功能
记一次uniapp开发微信小程序遇到的问题, 问题: 关于button的分享属性, 在HbuilderX中开发时,直接将button覆盖在image上,将button设置为透明,可以直接实现分享功能, ...
- uniapp开发微信小程序-7.用户填写表单信息
uniapp开发微信小程序-7.用户填写表单信息 本章让用户通过表单更新自己的个人信息,也是本系列文章最后一篇入门分享,之后碰到新颖.常用的功能会继续分享给大家,如果大家有任何问题欢迎留言,我会尽快线 ...
- uniapp开发微信小程序使用painter绘制海报
uniapp开发微信小程序使用painter绘制海报 参考文章: 1.简书大佬文章https://www.jianshu.com/p/e9cab600cf6c 2.CSDN大佬文章https://bl ...
- uniapp开发微信小程序-4.页面跳转与横向滑动
uniapp开发微信小程序-4.页面跳转与横向滑动 本篇文章主要是想记录一下横向滑动功能,备忘的同时给大家做个分享. 但既然是初级分享系列文章,为了方便新手朋友的上手工作,还是在此之前说一下页面跳转的 ...
- uniapp开发微信小程序 wx.navigateBack()携带数据问题
uniapp开发微信小程序 wx.navigateBack()携带数据问题 某个表单页面 有时需要跳转另一个页面查询数据 但如此想要保存当前页面数据需要在另一个查询页面调用 wx.navigateBa ...
最新文章
- java.lang.RuntimeException: Parcelable encountered IOException writing
- k8s概念入门之kubelet-针对1.1.版本阅读
- kettle对字符串去除空格_整理|ABAP基础知识二:常用字符串处理
- 【限时】推荐算法工程师培养计划
- ajax 传参数 java后台接收
- 理解OSI七层模型(了解OSI七层模型,数据如何传输,封装,解封装)
- Vue项目设置代理解决开发环境下的跨域问题
- (转)Asp.Net生命周期系列一
- [Z]用subcaption包排版子图(表)与图(表)格式设置
- jQuery - slice( start, [end] ) Method
- Libmodbus 移植
- 爱奇艺推出“帧绮映画MAX”标准打造高品质视听 多款电视机型获认证
- Python抖音去水印_一步到位_一蓑烟雨任平生
- 二元一次方程组计算机题,2元一次方程组(二元一次方程组计算题带答案)
- 五款免费开源的语音识别工具
- 重装系统lol登录服务器,LOL无法登录的彻底解决方法
- Windows应用程序C#创建MDI父窗体和子窗体
- ansible常用模块 -- fial模块 -- 自定义消息失败
- 程序员的自我修养——SQL语言及MySQL数据库
- 工控系统信息安全技术国家工程实验室建设取得阶段性成果