feat：添加输入框弹起事件

pages/index15/index15.vue

@@ -1,5 +1,5 @@
 <template>
-	<view id='app'>
+	<view id='app' :style="`bottom:${msgList.KeyBoardHeight}px`">
 		<view class="head" :style="{backgroundColor:styleData.color}">
 			<text :style="{color:styleData.fontColor}">睿宝AI</text>
 			<view class="switch">
@@ -31,18 +31,19 @@
 									<image class="avtar" src="../../static/Ai-avatar.png" mode="aspectFit"></image>
 								</view>
 							</view>
-						</view>
+						</view>	
 					</scroll-view>
 				</view>
 
-				<view class="chat-bottom">
+				<view class="chat-bottom" >
 					<view class="uni-label">
 						<label v-for="(item,index) in labelList" :key="index" @click="shortcuts(msgList,item)" :style="{backgroundColor:styleData.labelColor,color:styleData.fontColor,borderColor:styleData.borderColor}">{{item}}</label>
 					</view>
 					<view class="send-msg">
 						<view class="uni-textarea">
 							<textarea id="input-textarea" type="text" v-model="msgList.chatMsg" placeholder="快来聊天吧"
-								confirm-type="send" @confirm="handleSend(msgList)" maxlength="300" />
+								confirm-type="send" @confirm="handleSend(msgList)" maxlength="300" 
+								@keyboardheightchange="getKeyBoardHeight" :adjust-position="false"/>
 						</view>
 						<view class="uni-button">
 							<button class="send-btn" @click="handleSend(msgList)" type="primary" :disabled="msgList.isClick" :style="{backgroundColor:styleData.btnColor}">发送</button>
@@ -91,15 +92,17 @@
 		len: 0,
 		// 加载符号是否显示
 		isloading: [],
-		isClick:false
+		isClick:false,
+		KeyBoardHeight:0
 	})
 	
 	const styleData = reactive({
 		value:false,
 		color:'#f5f5f5',
 		fontColor:"black",
-		btnColor:"blue",
+		btnColor:"rgb(30,144,255)",
 		contentColor:"#fff",
+		labelColor: "#fff",
 		borderColor:"rgb(30,144,255)"
 		
 	})
@@ -117,6 +120,12 @@
 	watch([msgList.otherChatList,msgList.chatList], (newVal) => {
 		scrollToBottom(msgList)
 	})
+	
+	// 键盘弹起事件
+	const getKeyBoardHeight = ((event)=>{
+		// 获取键盘高度
+		msgList.KeyBoardHeight = event.detail.height
+	})
 
 </script>
 

pages/index32/index32.vue

@@ -1,5 +1,5 @@
 <template>
-	<view id='app' style="bottom: {{KeyBoardHeight}}px;">
+	<view id='app' :style="`bottom:${msgList.KeyBoardHeight}px`">
 		<view class="placeholder" :style="`height: ${styleData.screenWidth}vh`"></view>
 		<view class="head" :style="{backgroundColor:styleData.color}">
 			<text :style="{color:styleData.fontColor}">睿宝AI</text>
@@ -51,7 +51,8 @@
 						<view class="uni-textarea">
 							<!-- bindkeyboardheightchange='getKeyBoardHeight'    - 添加键盘弹起触发属性 -->
 							<textarea id="input-textarea" type="text" v-model="msgList.chatMsg" placeholder="快来聊天吧"
-								confirm-type="send" @confirm="handleSend(msgList)" maxlength="300"  />
+								confirm-type="send" @confirm="handleSend(msgList)" maxlength="300" 
+								@keyboardheightchange="getKeyBoardHeight" :adjust-position="false" />
 						</view>
 						<view class="uni-button">
 							<button class="send-btn" @click="handleSend(msgList)" type="primary"
@@ -145,13 +146,11 @@
 		}
 	}
 	
-	// 键盘弹起事件  --- 真机调试时，测试之后再看能不能这样用
-	// 
-	// const getKeyBoardHeight = ((event)=>{
-	// 	// 获取键盘弹起的高度
-	// 	msgList.KeyBoardHeight = event.detail.height
-	// 	console.log(msgList.KeyBoardHeight)
-	// })
+	// 键盘弹起事件
+	const getKeyBoardHeight = ((event)=>{
+		// 获取键盘高度
+		msgList.KeyBoardHeight = event.detail.height
+	})
 	 
 </script>
 

theme/public.css

@@ -1,5 +1,11 @@
 /* 15寸和32寸 公共样式*/
-
+#app{
+	height: 100%;
+	width: 100%;
+	background-color: #f5f5f5;
+	position: fixed;
+	bottom:20px;
+}
 /* --- 标题 --- */
 .head {
 	display: flex;
@@ -9,6 +15,7 @@
 	background-color: #f5f5f5;
 	font-size: 18px;
 	justify-content: center;
+	margin-top:20px;
 }
 .head text{
 	flex: 1;