uniapp + vue 定位聊天最新消息实现滚动条一直在元素的最底部

使用 scroll-view 配合uni.createSelectorQuery() 以及boundingClientRect()即可实现；

<scroll-view id="scrollview" class="chat-window" scroll-y="true" :style="{height: style.contentViewHeight + 'px'}":scroll-with-animation="true" :scroll-top="scrollTop"><view class="content-all"><block v-for="(item,index) in messages" :key="index" class="m-item"><view class="user-chat-item animated fadeIn fast u-f right" v-if="globalUser.id==item.fromUserId"><view class="meet-name fb">{{item.msg}}:{{globalUser.name}}</view></view><view class="user-chat-item animated fadeIn fast u-f left" v-else><view class="meet-name fb">{{name}}:{{item.msg}}</view></view></block></view><view id='gundong' style='height:1px;width:100%'></view></scroll-view>

使用生命周期函数

        mounted() {uni.createSelectorQuery().select("#gundong").boundingClientRect((res) => {this.oldbottom = res.bottom // 记录 滚动 元素的 bottom 值console.log(this.oldbottom)}).exec();},updated() {setTimeout(() => {uni.createSelectorQuery().select("#gundong").boundingClientRect((res) => {console.log(res)var newbottom = res.bottomif (Number(newbottom) > Number(this.oldbottom)) {this.scrollTop = newbottom}this.oldbottom = newbottomconsole.log(this.oldbottom)}).exec();}, 400)},created() {const res = uni.getSystemInfoSync(); //获取手机可使用窗口高度     api为获取系统信息同步接口this.style.pageHeight = res.windowHeight;this.style.contentViewHeight = res.windowHeight - uni.getSystemInfoSync().screenWidth / 750 * (30) - 60; //像素   因为给出的是像素高度 然后我们用的是upx  所以换算一下 this.scrollToBottom(); //创建后调用回到底部方法},

一定要加 setTimeout(() => {},400 ) 这样消息才会最下面

好像是让页面全部加载完毕之后只能自己通过定时达到异步的效果

看了好多博客总是差一点最后结合了好几篇的结果

样式的话自己写下吧我用了全局样式

<style>.left {flex-direction: row;}.right {flex-direction: row-reverse;}.meet-name {padding: 10upx 20upx;font-size: 28upx;/* margin-bottom: 20upx; */}.login-bottom {position: fixed;bottom: 0;}.login-bottom-input {display: flex;justify-content: space-between;}.login-bottom-input>input {background: #F7F9FF;border-radius: 28upx;width: 568upx;height: 62upx;margin: 30upx;color: #999999;font-size: 13px;padding-left: 20upx;}.login-bottom-input>text {color: #2774CB;font-size: 18px;height: 80upx;line-height: 80upx;padding-right: 20upx;padding-top: 20upx;font-weight: bold;}.demoList {text-align: center;line-height: 100upx;}</style>

uniapp + vue 定位聊天最新消息实现滚动条一直在元素的最底部相关推荐

关于uniapp开发微信小程序，实现聊天消息，最新消息最底部展示
关于uniapp开发微信小程序,实现聊天消息最新消息最底部展示实现消息最底部展示 uniapp\vue 页面布局此处我觉得最要注意的点就是看是谁产生的滚动条. 逻辑书写关键字: scrollTo ...
vue+websocket+nodejs实现聊天室 - 消息已读未读
前言上一篇讲了聊天室增加一对一单聊,这次讲如何新增已读未读状态. 大概思路: 服务器返回消息列表,增加参数status为1,单聊和群聊通过过滤状态区分对应未读数量,当前聊天,直接在currentMe ...
vue php聊天室,实时聊天室：基于Laravel+Pusher+Vue通过事件广播实现
之前有说过要整理出一篇事件广播的教程,今天终于有时间把这篇文章给写了出来,本次的教程是基于Laravel+Pusher+Vue,以事件广播作为核心技术,让你可以快速搭建起一个实时聊天室应用,话不多说, ...
uniapp仿微信--聊天界面模板
项目演示前言我是看B站的视频一个一个敲的,讲的还不错.可以去看看vue+node.js即时通讯聊天室APP开发前端篇主界面 chat.vue <template><!-- 聊天 ...
流集数据收集器最新消息
最新消息 3.10.0 中的新增功能数据收集器版本 3.10.0 包括以下新功能和增强功能: 起源此版本包括以下新源: Groovy 脚本 - 运行 Groovy 脚本以创建数据收集器记录. 脚本 ...
魔兽世界怀旧服最新服务器开发时间,怀旧服开70最新消息汇总魔兽怀旧服TBC开放时间几个阶段？...
很多玩家关心魔兽世界怀旧服开70最新消息进展的情况,到底魔兽怀旧服TBC开放时间几个阶段.在这里就做一个关于暴雪可能开TBC的时间. 最早的时候,暴雪已经向当今的许多玩家发送了一份有关70级的tbc怀 ...
基于vue前端聊天插件_基于Vue聊天的实现
基于vue前端聊天插件基本视频聊天 (basic-vue-chat) Easy to use VueJS chat. 易于使用的VueJS聊天. 安装 (Installation) You can ...
uniapp unipush接入个推消息推送（各种踩坑记录）安卓+IOS+在线消息+离线消息
uniapp 消息推送功能实现上周公司要求做一个消息推送的功能,由于现有的电商APP是用uniapp做的,所以优先考虑uniapp自带的unipush消息推送. ios证书导出踩坑 ios推送证书导 ...
uni-app(Vue.js)创建运行微信小程序
uni-app(Vue.js)创建运行微信小程序 1.全局安装 npm install -g @vue/cli 需要安装node,官方网站,否则提示npm不可用 2.创建uni-app 新建文件夹,选 ...

uniapp + vue 定位聊天最新消息实现滚动条一直在元素的最底部

使用生命周期函数

uniapp + vue 定位聊天最新消息实现滚动条一直在元素的最底部相关推荐

最新文章

热门文章

uniapp + vue 定位聊天最新消息 实现滚动条一直在元素的最底部

使用生命周期函数

uniapp + vue 定位聊天最新消息 实现滚动条一直在元素的最底部相关推荐

最新文章

热门文章

uniapp + vue 定位聊天最新消息实现滚动条一直在元素的最底部

uniapp + vue 定位聊天最新消息实现滚动条一直在元素的最底部相关推荐