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

Loading…
Cancel
Save