uniapp聊天对话滚动到底部

使用scroll-top使聊天对话滚动到底部

scroll-view需要设置高度

输入内容后，必然要在对话界面的底部显示内容，但是在uni-app下不知道如何能操作DOM来显示和定位，有说需要通过uni.pageScrollTo的方式，但是这个页面刷新的太厉害，输入框都刷新了，没法使用。所以只能使用scroll-view组件。但是通过scroll-view使用竖向滚动时，需要给 <scroll-view> 一个固定高度。为了适配屏幕的大小，则需要通过计算来确定scroll-view的高度。

<scroll-view id="scrollview" class="chat-window" scroll-y="true" :style="{height: style.contentViewHeight + 'px'}" :scroll-with-animation="true" :scroll-top="scrollTop"><block v-for="chat in chatList"><online-chat-control :chatItem="chat"></online-chat-control></block></scroll-view>

js代码

data() {return {// 聊天页面时时滚动样式style: {pageHeight: 0,contentViewHeight: 0,footViewHeight: 90,mitemHeight: 0,},scrollTop : 0}
},
created() {const res = uni.getSystemInfoSync(); //获取手机可使用窗口高度     api为获取系统信息同步接口this.style.pageHeight = res.windowHeight;this.style.contentViewHeight = res.windowHeight - uni.getSystemInfoSync().screenWidth / 750 * (300); //像素   因为给出的是像素高度 然后我们用的是upx  所以换算一下 },
onLoad() {this.scrollToBottom(); //创建后调用回到底部方法
}

发送消息时调用

/**
* @information 跳转页面底部
*/
scrollToBottom() {let that = this;let query = uni.createSelectorQuery();query.selectAll('.cu-chat').boundingClientRect();query.select('#scrollview').boundingClientRect();query.exec((res) => {hat.style.mitemHeight = 0;res[0].forEach((rect) => that.style.mitemHeight = that.style.mitemHeight + rect.height + 40) //获取所有内部子元素的高度// 因为vue的虚拟DOM 每次生成的新消息都是之前的，所以采用异步setTimeout    主要就是添加了这定时器setTimeout(() => {if (that.style.mitemHeight > (that.style.contentViewHeight - 100)) { //判断子元素高度是否大于显示高度that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight //用子元素的高度减去显示的高度就获益获得序言滚动的高度}}, 100)})
},

uniapp聊天对话滚动到底部相关推荐

uni-app 聊天对话滚动到最底部
uni-app 之聊天室滚到最底部请注意 !: 知识点为uni-app 与 vue 结合这次写到聊天室,碰到一个emmmmm问题比较严重的事情,聊天嘛,咱们想实现的就无非是微信,QQ那种聊天的 ...
uniapp聊天框滚动到底部（简单高效）
需要注意修改class .cu-chat 为你的页面聊天框外层class,需要在控制台审查元素有高度. 代码: this.$nextTick(function() { ...
uniapp微信小程序仿聊天输入框在软键盘隐藏显示时与底部距离，以及保证聊天消息滚动到底部的问题以及解决办法
(本文最后边有完整代码,想先看效果的,可以直接粘贴不会报错) 一.先说输入框 1.输入框和键盘紧贴着,也就是计算输入框在键盘隐藏显示时距离底部的距离,我让输入框外边的盒子固定定位,给bottom一 ...
vue 聊天框滚动到底部
容器 <div class="scroll"><div ref="toBottom" @click="toBottom()" ...
[uni-app]聊天App实例
项目简介基于uni-app+vue+vuex+uniPop+swiper等技术开发的仿微信聊天室uniapp-chatroom项目,类似vue及小程序api语法使开发更加方便,实现了发送图文消息.表 ...
vue整合uniapp_uni-app仿微信App界面|vue+uniapp聊天室|仿微信朋友圈
项目简介基于uni-app+vue+vuex+uniPop+swiper等技术开发的仿微信聊天室uniapp-chatroom项目,类似vue及小程序api语法使开发更加方便,实现了发送图文消息.表 ...
uniapp 即时通讯_uni-App 仿微信 App 即时通讯|vue+uniapp 聊天
项目介绍基于uni-app+vue+vuex+uniPop+swiper等技术开发仿微信App聊天室实战项目,实现了发送消息.表情(gif动图),图片预览.地图位置.红包.仿微信朋友圈等功能. 项目 ...
小程序聊天对话，每次都显示最新消息（让页面自动滚动到底部）
//页面自动滚动到底部pageScrollToBottom:function(){wx.createSelectorQuery().select('#scrollpage').boundingClie ...
uniapp实现滚动到底部加载更多数据
如果数据量非常大的话,数据批量加载是一种优化手段,那么,如何实现? onReachBottom uniapp的生命周期onReachBottom 页面滚动到底部的事件(不是scroll-view滚到底 ...

uniapp聊天对话滚动到底部

使用scroll-top使聊天对话滚动到底部

scroll-view需要设置高度

js代码

uniapp聊天对话滚动到底部相关推荐

最新文章

热门文章