浏览代码

聊天实时滚动到底部

lifanagju_citu 6 月之前
父节点
当前提交
310eb513ca
共有 1 个文件被更改,包括 10 次插入4 次删除
  1. 10 4
      pagesA/chart/index.vue

+ 10 - 4
pagesA/chart/index.vue

@@ -37,7 +37,8 @@
       </view> -->
       <uni-notice-bar v-if="hasWaitingProcessingInterview" show-get-more single text="您有待处理的面试邀请,点击查看详情" @click="handleToCenter"/>
     </view>
-      <scroll-view class="box-main" scroll-y="true" ref="chatRef" :scroll-top="scrollInto">
+      <!-- newsId 需要和聊天列表里面的id对应 永远取最后列表中的最后一个就可以做到发送消息即时滚动到底部 -->
+      <scroll-view ref="chatRef" scroll-with-animation :scroll-into-view="newsId" class="box-main" scroll-y="true">
         <view class="box-main-more" v-if="hasMore">
           <text @click="handleMore">查看更多</text>
         </view>
@@ -243,6 +244,7 @@ const inputValue = ref('')
 // const confirm = ref()
 // const chooseInvite = ref(null)
 
+const newsId = ref('') // newsId 需要和聊天列表里面的id对应 永远取最后列表中的最后一个就可以做到发送消息即时滚动到底部
 const scrollInto = ref(0)
 
 const isSendResume = ref(false)
@@ -307,9 +309,13 @@ async function init(userId, enterpriseId) {
   setScrollBottom()
 }
 
-// 滑动到底部
-function setScrollBottom () {
-  // scrollInto.value = 200
+
+const setScrollBottom = () => {
+  if (items.value?.length) {
+    const lastOne = items.value[items.value.length-1]
+    const index = items.value.length-1
+    newsId.value = 's' + lastOne.id + index // newsId 需要和聊天列表里面的id对应 永远取最后列表中的最后一个就可以做到发送消息即时滚动到底部
+  }
 }
 
 const hasWaitingProcessingInterview = ref(false) // 是否有待接受的面试邀请