|
@@ -12,22 +12,20 @@
|
|
|
<scroll-view
|
|
|
scroll-y
|
|
|
class="chat-content"
|
|
|
+ :scrollTop="scrollTop"
|
|
|
@scroll="viewScroll"
|
|
|
id="chatListContainer"
|
|
|
v-show="isShowChatList"
|
|
|
@scrolltolower="handleScroll"
|
|
|
- :scrollTop="scrollTop"
|
|
|
>
|
|
|
<!-- 替换为实际条件 -->
|
|
|
<!-- 聊天记录列表 -->
|
|
|
- <view class="chat-list pd-32" :style="{ 'padding-bottom': '300rpx' }">
|
|
|
- <CustomLoadMore :status="loadStatus" />
|
|
|
+ <view class="chat-list pd-32" :style="{ 'padding-top': '300rpx' }">
|
|
|
<!-- 时间显示 -->
|
|
|
- <template v-for="(item, index) in chatList" :key="index">
|
|
|
- <view class="time">
|
|
|
+ <view v-for="(item, index) in chatList" :key="index" class="chat-item">
|
|
|
+ <view class="time" v-if="index % 5 == 0 && item.role=='user'" >
|
|
|
<text
|
|
|
- >{{ formatTimestamp(item.created) }}------{{ index + 1 }}</text
|
|
|
- >
|
|
|
+ >{{ formatTimestamp(item.created) }}</text>
|
|
|
</view>
|
|
|
<!-- 本人(助手)消息 -->
|
|
|
<view class="user" v-if="item.role === 'assistant'">
|
|
@@ -77,7 +75,11 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </template>
|
|
|
+ </view>
|
|
|
+ <CustomLoadMore
|
|
|
+ :status="loadStatus"
|
|
|
+ style="transform: rotate(180deg)"
|
|
|
+ />
|
|
|
</view>
|
|
|
<view
|
|
|
v-if="chatList.length == 0"
|
|
@@ -155,6 +157,7 @@ const scrollTop = ref(0);
|
|
|
// 聊天记录
|
|
|
const chatList = ref<any>([]);
|
|
|
const isScroll = ref(true);
|
|
|
+const scrollView = ref("");
|
|
|
/**
|
|
|
* 打开调优弹窗
|
|
|
*/
|
|
@@ -215,8 +218,8 @@ const getData = async () => {
|
|
|
const {
|
|
|
data: { records, total },
|
|
|
} = await aichat.msgList(paramsData.value);
|
|
|
- records.reverse();
|
|
|
- chatList.value.unshift(...records);
|
|
|
+ // records.reverse();
|
|
|
+ chatList.value.push(...records);
|
|
|
pageTotal.value = total;
|
|
|
console.log(chatList.value);
|
|
|
|
|
@@ -245,46 +248,23 @@ let isThrottling = false;
|
|
|
let currentScroll = 0;
|
|
|
// 处理滚动事件
|
|
|
const handleScroll = (event: any) => {
|
|
|
- if (isThrottling) return; // 如果正在节流,则退出
|
|
|
- isScroll.value = false;
|
|
|
- // 设置节流状态为 true
|
|
|
- isThrottling = true;
|
|
|
-
|
|
|
- // 处理滚动事件逻辑
|
|
|
- // console.log("滚动了", event);
|
|
|
loadStatus.value = "loading";
|
|
|
- ++paramsData.value.pageNum;
|
|
|
- // nextTick(() => {
|
|
|
-
|
|
|
- // })
|
|
|
- console.log("当前", scrollTop.value, currentScroll);
|
|
|
-
|
|
|
setTimeout(() => {
|
|
|
+ goTop();
|
|
|
getData();
|
|
|
- if (chatList.value.length < pageTotal.value) {
|
|
|
- loadStatus.value = "loadmore";
|
|
|
- } else {
|
|
|
- loadStatus.value = "nomore";
|
|
|
- }
|
|
|
}, 500);
|
|
|
- // 在 1000ms 后取消节流状态
|
|
|
- setTimeout(() => {
|
|
|
- isThrottling = false;
|
|
|
-
|
|
|
- scrollTop.value = currentScroll;
|
|
|
- }, 1000);
|
|
|
};
|
|
|
-
|
|
|
+const goTop = () => {
|
|
|
+ // 解决view层不同步的问题
|
|
|
+ scrollTop.value = currentScroll;
|
|
|
+ nextTick(() => {
|
|
|
+ // scrollTop.value = 0;
|
|
|
+ });
|
|
|
+};
|
|
|
const isScrollTop = ref(false);
|
|
|
|
|
|
const viewScroll = (event: any) => {
|
|
|
- // console.log("当前高度", event.detail.scrollTop);
|
|
|
- if(!isThrottling) {
|
|
|
- currentScroll = event.detail.scrollTop
|
|
|
- }
|
|
|
- // if(isThrottling) {
|
|
|
- // currentScroll =1670
|
|
|
- // console.log("设置完", event.detail.scrollTop,currentScroll);}
|
|
|
+ currentScroll = event.detail.scrollTop;
|
|
|
};
|
|
|
/**
|
|
|
* 处理返回按钮事件
|
|
@@ -305,4 +285,18 @@ onLoad((option) => {
|
|
|
page {
|
|
|
background-color: #f5f7fa;
|
|
|
}
|
|
|
+ .chat-content div::-webkit-scrollbar{
|
|
|
+ display: none;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ -webkit-appearance: none;
|
|
|
+ background: transparent;
|
|
|
+ color: transparent;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-content div{
|
|
|
+ -ms-overflow-style: none; /* IE 10+ */
|
|
|
+ scrollbar-width: none; /* Firefox */
|
|
|
+ }
|
|
|
</style>
|