236 字
1 分钟
Vue聊天框逻辑思路整理
打开默认滚动至最下方
//获取元素 eleele.scrollTop = ele.scrollHeight - oldScrollHeight上翻加载新加入数据后页面跳动问题
由于定死了scrolltop,导致新加入数据后页面整体被挤了下来,此刻需要手动改变scrolltop
思路:预先获取旧的容器高度,插入数据后获取新的容器高度,两者相减,得出多出来的容器高度,再手动加给scrolltop即可
//获取元素 eleconst oldScrollHeight = ele.scrollHeight异步获取并添加数据处理.then(() => { this.$nextTick(() => { ele.scrollTop += ele.scrollHeight - oldScrollHeight })})上翻时显示加载中
在容器内部添加加载中元素,根据属性isLoading判断是否渲染
<div class="是容器酱哟"> <div v-if="isLoading" class="loading"> <img src="@/assets/img/loading.gif">数据载入中... </div><div>data中:
refreshLength: 10, // 加载分页一次性添加元素数量isLoading: false // 加载状态初次进入判断是否渲染加载元素(初次分页拿到的数据不足分页数量,说明已经没有下一页了,不需要显示加载了):
if (聊天数据.length === this.refreshLength) { this.loading = true}在异步获取添加数据函数中处理(获取新的数据条数小于分页数量,也说明没有下一页了):
异步获取并添加数据处理.then(res => { if (res.length < this.refreshLength) { this.loading = false } else { this.$nextTick... //见上 }}) 分享
如果这篇文章对你有帮助,欢迎分享给更多人!
Vue聊天框逻辑思路整理
https://marrydream.top/posts/web前端/vue聊天框逻辑思路整理/ 部分信息可能已经过时
相关文章 智能推荐