输入框调整

This commit is contained in:
wangdongbo 2026-02-11 15:21:05 +08:00
parent 781c8803a8
commit b91723e561
3 changed files with 19 additions and 2 deletions

View File

@ -15,6 +15,7 @@ $primary-color: #0877F1;
flex-direction: column;
background-color: #f5f5f5;
overflow: hidden;
transition: padding-bottom 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* 患者信息栏样式 */
@ -124,6 +125,7 @@ $primary-color: #0877F1;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
transition: bottom 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.chat-content-compressed {
@ -398,6 +400,8 @@ $primary-color: #0877F1;
padding-bottom: env(safe-area-inset-bottom);
flex-shrink: 0;
transform: translateZ(0); /* 开启硬件加速,提升性能 */
transition: bottom 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: bottom;
}
.input-toolbar {

View File

@ -1,5 +1,5 @@
<template>
<view class="input-section">
<view class="input-section" :style="{ bottom: props.keyboardHeight + 'px' }">
<view class="input-toolbar">
<view @click="toggleVoiceInput" class="voice-toggle-btn">
<image v-if="showVoiceInput" src="/static/jianpan.png" class="voice-toggle-icon" mode="aspectFit"></image>
@ -8,7 +8,7 @@
<view class="input-area">
<textarea v-if="!showVoiceInput" class="text-input" v-model="inputText" placeholder="我来说两句..."
@confirm="sendTextMessage" @focus="handleInputFocus" @input="handleInput"
:auto-height="true" :show-confirm-bar="false" :adjust-position="false" :cursor-spacing="40" />
:auto-height="true" :show-confirm-bar="false" :adjust-position="false" />
<input v-else class="voice-input-btn" :class="{ recording: isRecording }" @touchstart="startRecord"
@touchmove="onRecordTouchMove" @touchend="stopRecord" @touchcancel="cancelRecord" :placeholder="isRecording ? '松开发送' : '按住说话'" disabled>
</input>
@ -77,6 +77,7 @@ const props = defineProps({
groupId: { type: String, default: '' },
userId: { type: String, default: '' },
corpId: { type: String, default: '' },
keyboardHeight: { type: Number, default: 0 },
});
// Emits

View File

@ -23,6 +23,7 @@
<!-- 聊天消息区域 -->
<scroll-view
class="chat-content"
:style="{ bottom: (keyboardHeight > 0 ? keyboardHeight + 120 : 120) + 'px' }"
scroll-y="true"
enhanced="true"
bounces="false"
@ -147,6 +148,7 @@
"
:userId="openid"
:corpId="corpId.value"
:keyboardHeight="keyboardHeight"
@scrollToBottom="() => scrollToBottom(true)"
@messageSent="() => scrollToBottom(true)"
/>
@ -450,7 +452,17 @@ onLoad((options) => {
//
uni.onKeyboardHeightChange((res) => {
console.log("键盘高度变化:", res.height);
const oldHeight = keyboardHeight.value;
keyboardHeight.value = res.height;
// 00
if (oldHeight === 0 && res.height > 0) {
nextTick(() => {
setTimeout(() => {
scrollToBottom(true);
}, 100);
});
}
});
checkLoginAndInitTIM();