打开默认滚动至最下方
1
2
|
ele.scrollTop = ele.scrollHeight - oldScrollHeight
|
上翻加载新加入数据后页面跳动问题
由于定死了scrolltop，导致新加入数据后页面整体被挤了下来，此刻需要手动改变scrolltop
思路：预先获取旧的容器高度，插入数据后获取新的容器高度，两者相减，得出多出来的容器高度，再手动加给scrolltop即可
1
2
3
4
5
6
7
|
const oldScrollHeight = ele.scrollHeight
异步获取并添加数据处理.then(() => {
this.$nextTick(() => {
ele.scrollTop += ele.scrollHeight - oldScrollHeight
})
})
|
上翻时显示加载中
在容器内部添加加载中元素，根据属性isLoading判断是否渲染
1
2
3
4
5
| <div class="是容器酱哟">
<div v-if="isLoading" class="loading">
<img src="@/assets/img/loading.gif">数据载入中...
</div>
<div>
|
data中:
1
2
| refreshLength: 10,
isLoading: false
|
初次进入判断是否渲染加载元素（初次分页拿到的数据不足分页数量，说明已经没有下一页了，不需要显示加载了）：
1
2
3
| if (聊天数据.length === this.refreshLength) {
this.loading = true
}
|
在异步获取添加数据函数中处理（获取新的数据条数小于分页数量，也说明没有下一页了）：
1
2
3
4
5
6
7
| 异步获取并添加数据处理.then(res => {
if (res.length < this.refreshLength) {
this.loading = false
} else {
this.$nextTick...
}
})
|