Browse Source

refactor(im_chat_info): 优化聊天记录加载后的滚动体验

- 移除不必要的 scrollIntoView 和 scrollViewHeight 属性
- 添加 isFirstLoad 和 scrollTop 属性
- 修改加载完成后滚动到底部的逻辑,使用 scrollTop 属性
- 优化代码结构,提高可读性和性能
master
liutong 1 year ago
parent
commit
df2cca374b
  1. 25
      pages/common/im_chat_info.vue

25
pages/common/im_chat_info.vue

@ -6,6 +6,7 @@
<scroll-view
class="section_1"
scroll-y="true"
:scroll-top="scrollTop"
:lower-threshold="lowerThreshold"
style="height: 80vh;"
>
@ -90,7 +91,8 @@ export default {
content: '',//文本内容(JSON 格式扩展字段),文本类型=纯文字,图片类型=绝对路径
},
lastItemId: null,
isFirstLoad: true, // 标记是否为首次加载
scrollTop:'',
}
},
onLoad(options) {
@ -137,16 +139,10 @@ export default {
//获取聊天记录列表
await this.getList();
// 更新最后一个 item 的 ID
this.lastItemId = 'item_' + (this.tableList.length - 1);
// 滚动到底部
this.$nextTick(() => {
this.$refs.scrollView.scrollTo({ top: this.scrollViewHeight });
});
// 或者直接使用 scroll-into-view
this.scrollIntoView = this.lastItemId;
// 首次加载后滚动到底部
if (this.filteredData.page == 2) {
this.scrollToBottom()
}
},
//获取好友关系详情
@ -303,6 +299,13 @@ export default {
}
},
//页面滚动到底部
scrollToBottom() {
alert(1)
this.$nextTick(() => {
this.scrollTop = 999999 // 足够大的值确保滚动到底部
})
},
}
}
</script>

Loading…
Cancel
Save