zjs_project 10 月之前
父节点
当前提交
dc7e78795d

+ 2 - 1
src/pages/webgl_rxdz_recognizer_houseList/webgl_rxdz_recognizer_houseList.html

@@ -5,7 +5,7 @@
 	</div> -->
 	<!-- 户型选择区域 -->
 	<div class="scroll-class">
-		<div class="main">
+		<div class="main" ref="scrollArea">
             <div class="message-box columns" :style="{'align-items':item.type==1?'flex-end':'flex-start'}" v-for='(item,index) in messageList' :key="index" >
                 <template v-if="item.type==1">
                     <div class="right rows">
@@ -24,6 +24,7 @@
                     </div>
                 </template>
             </div>
+            <div ref="lastElement" style="height: 1px;margin-bottom: 35px;"></div> <!-- 隐藏的元素 -->
 			<!-- <div @click="changeHouse(index)" class="item columns" :class="{'active': selectIndex == index}" 
 				v-for="(house,index) in houseList" :key="index" >
 				<img class="item-img" :src="house.coverImage" />

+ 14 - 0
src/pages/webgl_rxdz_recognizer_houseList/webgl_rxdz_recognizer_houseList.vue

@@ -327,6 +327,7 @@
                     }else{
                         this.changeHouse(houseIndex);
                     }
+                    this.scrollToBottom();
                     return false;
                 }else{
                     houseIndex = this.extractNumber(text);//获取文字里面的数字 第三个 类似这样的
@@ -368,6 +369,7 @@
                         text:   "没有匹配到,请再说一次",
                     }
                     this.messageList.push(message);
+                    this.scrollToBottom();
                     return false;
                 }
                 if(houseIndex > this.houseList.length){
@@ -380,11 +382,23 @@
                         text:   "没有匹配到,请再说一次!",
                     }
                     this.messageList.push(message);
+                    this.scrollToBottom();
                    return false; 
                 }
                 this.changeHouse(houseIndex);
+                this.scrollToBottom();
                 console.log("textChange:", houseIndex);
             },
+            //滚动到底部
+            scrollToBottom() {
+                setTimeout(()=>{
+                    // const scrollArea = this.$refs.scrollArea;
+                    // scrollArea.scrollTop = scrollArea.scrollHeight;
+                    const lastElement = this.$refs.lastElement;
+                    // 将最后一个元素滚动到视口  
+                    lastElement.scrollIntoView({ behavior: 'smooth' });  
+                },200)
+            },
             //语音识别
             speechRecognizer() {
                 this.touching = true;//用户开始触摸语音按钮